如何在 jQuery 中使动态添加的列表元素可拖动？

Question

以下是我从http://jsfiddle.net/XUFUQ/1/获取的代码：

$(document).ready(function()
    {
        addElements();
    }
);

function addElements()
{
    $("#list1").empty().append(
        "<li id='item1' class='list1Items'>Item 1</li>"+
        "<li id='item2' class='list1Items'>Item 2</li>"+
        "<li id='item3' class='list1Items'>Item 3</li>"
    );
}

$(function() {
    // there's the gallery and the trash
    var $gallery = $( "#list1" ),
    $trash = $( "#list2" );

    // let the gallery items be draggable
    $( "li", $gallery ).draggable({
        cancel: "button", // these elements won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
        accept: "#list1 > li",
        drop: function( event, ui ) {
            $("#list2").append(ui.draggable);
            addElements();
    }
    });


});

在文档准备方法中，我将一些元素附加到list1，然后在该列表上初始化可拖动功能，因此第一次可以拖动list1元素。在放置在list2中时，我调用addElements()函数来清除并添加一些元素到list1。但是我无法拖动这些添加的元素。

如何使这些元素可拖动？

- Sagar

---

可能会使用on()，但没有代码很难确定。 - Tdelang

每次创建新元素时，您只需将“draggable”绑定到它们即可。 - Ian Clark

抱歉耽搁了，我不知道如何发布链接，请查看上面的链接。 - Sagar

@Tdelang - 你如何在可拖动的情况下使用.on()？ - techfoobar

@Tdelang .on() 是用于事件监听器，而不是插件初始化。 - A. Wolff

Answer 1

这是我为任何未来的搜索者做的一个小技巧 :) 这段代码只需要运行一次，而且非常易于理解。

//The "on" event is assigned to the "document" element which is always available within the context
//Capture all the "mouseenter" event to any child element of "document" with a specific class (you can you any valid jQuery selector you like)
//any live and dynamic element with the class will become draggable (haven't tested on touchscreen devices)
$(document).on("mouseenter", '.someClass', function(e){
 var item = $(this); 
 //check if the item is already draggable
 if (!item.is('.ui-draggable')) {
         //make the item draggable
         item.draggable({
            .............
         });
  }
});

干杯！

- alien45

Answer 2

以下是根据更新版本http://jsfiddle.net/XUFUQ/6/所需执行的丑陋代码。最好将可重用代码分离出来：

// let the trash be droppable, accepting the gallery items
$trash.droppable({
    accept: "#list1 > li",
    drop: function( event, ui ) {
        $("#list2").append(ui.draggable);
        addElements();
        $( "li", $gallery ).draggable({
            cancel: "button", // these elements won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
           })
        }
});

基本上，只有在调用draggable时连接到存在的元素。这会将各种鼠标处理事件添加到每个元素中。如果您添加元素，它不知道它们的存在，因此您需要再次在这些元素上调用draggable。

另外两个答案都给出了可以添加可拖动以确保包含元素的示例，但这是一个编码练习。

- Gone Coding

Answer 3

使新添加的元素再次可拖动。

function addElements()
{
    $("#list1").empty().append(
        "<li id='item1' class='list1Items'>Item 1</li>"+
        "<li id='item2' class='list1Items'>Item 2</li>"+
        "<li id='item3' class='list1Items'>Item 3</li>"
    );
    $("#list1 li").draggable({
        cancel: "button", // these elements won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });
}

这里是 fiddle。

- Mandeep Jain

Answer 4

    function addElements()
    {
        $("#list1").empty().append(
            "<li id='item1' class='list1Items'>Item 1</li>"+
            "<li id='item2' class='list1Items'>Item 2</li>"+
            "<li id='item3' class='list1Items'>Item 3</li>"
        );
        // there's the gallery and the trash
        var $gallery = $( "#list1" );


   $( "li", $gallery ).draggable({
            cancel: "button", // these elements won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
        });

}

你只需要在你的 "addElement()" 方法中添加 ".draggable()" 方法。 这样，你就可以将可拖动函数附加到你在画廊中添加的每个列表上。

请查看此链接以获取更正信息。 http://jsfiddle.net/XUFUQ/7/

- Okazari

Answer 5

尝试这个：

$(document).ready(function () {
    addElements();

    var $gallery = $("#list1"),
        $trash = $("#list2");

$("li", $gallery).draggable({
    cancel: "button", 
    revert: "invalid", 
    containment: "document",
    helper: "clone",
    cursor: "move"
});

$trash.droppable({
    accept: "#list1 > li",
    drop: function (event, ui) {
        $("#list2").append(ui.draggable);
        addElements();
    }
});
});

function addElements() {
$("#list1").empty().append(
    "<li id='item1' class='list1Items'>Item 1</li>" +
    "<li id='item2' class='list1Items'>Item 2</li>" +
    "<li id='item3' class='list1Items'>Item 3</li>");

$("#list1 > li").draggable({
    cancel: "button", // these elements won't initiate dragging
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move"
});

$("#list2").droppable({
    accept: "#list1 > li",
    drop: function (event, ui) {
        $("#list2").append(ui.draggable);
        addElements();
    }
});
}  

JSFIDDLE DEMO

- Dhaval Bharadva