使用JQuery-Ui Droppable定位拖动，删除和追加的项目

我正在使用JQuery-ui draggable＆droppable。 我想将删除的元素添加到drop-target容器中，同时保留它在删除时的明显位置。 使用.html（）可以保留.draggable（）函数添加的位置数据，但由于它们成为新元素的子元素，因此它们会捕捉到相对于该元素的新位置。 我试用了helper：clone，但发现它删除了所有定位信息。

这是我的代码，它将删除的项添加到放置目标，并在每次删除上一个项时生成一个新的拖动项。 它起作用，除了掉落元素的定位是错误的 – 它们应该保持它们在掉落时的视觉位置。

var $foo = 1; var bar = "drag-" + $foo; $(".origin div").addClass(bar); $( ".origin div" ).draggable({ containment: ".modal" }); $( ".droppable" ).droppable({ accept: ".origin div", drop: function( event, ui ) { $(".droppable").append($('.origin').html()); succeed(); } }); function succeed() { $foo++; var bar = "drag-" + $foo; $('.origin').html("
Drag 
" ); $(".origin div").addClass(bar); $( ".origin div" ).draggable({ containment: ".modal" }); } 

加价：

  
 
Drag 
 
 
 
accept: '#draggable'
  

这是一个JSFiddle：

http://jsfiddle.net/jrX2M/1/

我们非常欢迎有关调查可能性的建议！

Answer 1

解决了绝对定位。 将子元素追加到隐藏的，绝对定位的div“accept”，并手动将子元素位置更改为“absolute”：

http://jsfiddle.net/jrX2M/3/

JQuery：var $ foo = 1; var bar =“drag-”+ $ foo;

 $(".origin div").addClass(bar); $( ".origin div" ).draggable({ containment: ".modal" }); $( ".droppable" ).droppable({ accept: ".origin div", drop: function( event, ui ) { $(".accept").append($('.origin').html()); $(".accept div").css("position", "absolute"); succeed(); } }); function succeed() { $foo++; var bar = "drag-" + $foo; $('.origin').html("
Drag 
" ); $(".origin div").addClass(bar); $( ".origin div" ).draggable({ containment: ".modal" }); } 

加价：

 
 
 
 
 
Drag 
 
 
 
accept: '#draggable'