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

Posted 2023-05-08

【中文标题】如何在jquery中使动态添加的列表元素可拖动？

【英文标题】：How to make dynamically added list elements draggable in 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() 用于事件监听器，而不是插件初始化

【参考方案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