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

这是我的代码来自http://jsfiddle.net/XUFUQ/1/

$(document).ready(function() { addElements(); } ); function addElements() { $("#list1").empty().append( "
Item 1
"+ "
Item 2
"+ "
Item 3
" ); } $(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，然后我在该列表上初始化draggable，所以我第一次能够拖动list1元素。 在list2中删除我调用addElements（）函数来清除并向list1添加一些元素。 但我无法拖动这些添加的元素。

如何使这些元素可拖动？

Answer 1

这是基于更新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。

另外两个答案都举例说明了你可以在哪里添加draggable以确保包含元素，但这是一个编码练习。

Answer 2

这是我为任何未来的寻求者做的一个小技巧:)这个代码只需运行一次，它几乎是不言自明的。

 //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({ ............. }); } }); 

干杯!

Answer 3

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

 function addElements() { $("#list1").empty().append( "
Item 1
"+ "
Item 2
"+ "
Item 3
" ); $("#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" }); } 

这是小提琴

Answer 4

  function addElements() { $("#list1").empty().append( "
Item 1
"+ "
Item 2
"+ "
Item 3
" ); // 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（）”方法。 对此，您可以在您在图库中附加的每个列表上附加dragragble函数。

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

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( "
Item 1
" + "
Item 2
" + "
Item 3
"); $("#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