jQuerryUI多个可放置元素

为什么当我将draggable div拖到droppable1 div时，它总是放在droppable2 div中。

另外我遵循jQuery UI snap-back选项，但它不起作用。 我怎么能做到这一点，而不是拖动实际的draggable元素，它拖动它的实例/副本，并有droppable接受这些draggable元素的多个。

   $(function() { $( '#draggable' ).draggable(); $( '#droppable1' ).droppable({ drop: function(event, ui) { $(this) .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'})); } }); $( '#droppable2' ).droppable({ drop: function(event, ui) { $(this) .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'})); } }); });  
 
CONTENT
 
 
 
 

Answer 1

对于draggable选项，可以使用克隆helper ，而不是在drop事件克隆中使用克隆helper ，并附加已删除的助手。

码：

 $(function () { $('#draggable').draggable({ helper: 'clone' }); $('#droppable1, #droppable2').droppable({ drop: function (event, ui) { $(this) .append(ui.helper.clone(false).css({ position: 'relative', left: '0px', top: '0px' })); } }); }); 

演示： http ： //jsfiddle.net/IrvinDominin/v3L7A/

Answer 2

您可以使用接受filter接受特定可放置区域中的特定项目。

 $( '#droppable1' ).droppable({ accept: '#draggable', drop: function(event, ui) { $(this) .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'})); } });