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

【问题标题】：How to make dynamically added list elements draggable in jquery?如何在jquery中使动态添加的列表元素可拖动？
【发布时间】：2013-07-30 07:02:41
【问题描述】：

这是我来自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。但我无法拖动这些添加的元素。

如何使这些元素可拖动？

【问题讨论】：

大概用on()，但是没有代码就不好说了。
每次创建新元素时，您只需将draggable 绑定到它们。
抱歉耽搁了，我不明白如何发布链接，请通过上面的链接
@Tdelang - 如何将.on() 与可拖动一起使用？
@Tdelang .on() 用于事件监听器，而不是插件初始化

标签： jquery draggable jquery-ui-draggable

【解决方案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({
            .............
         });
  }
});

干杯！

【讨论】：

【解决方案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 。

其他两个答案都提供了可以添加可拖动元素以确保包含元素的示例，但这是一个编码练习。

【讨论】：

【解决方案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

【讨论】：

【解决方案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"
        });

}

您只需将“.draggable()”方法推入“addElement()”方法即可。对此，您将在添加到图库中的每个列表上附加可拖动功能。

检查这个小提琴是否更正。 http://jsfiddle.net/XUFUQ/7/

【讨论】：

【解决方案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

【讨论】：