Javascript jQueryUI多个可拖放元素

为什么当我将我的

draggable

div拖动到

droppable1

div时，它总是被放置在

droppable2

div中

此外，我使用了jQueryUISnapback选项，但它不起作用。我怎样才能使它不拖动实际的

draggable

元素，而是拖动它的一个实例/副本，并让

dropable

接受这些

draggable

元素的多个

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
  $(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'}));
      }
    });



  });
</script>

<div class="well">
  <div id="draggable">CONTENT</div>
</div>

<div id="droppable1" class="well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="well col-md-9" style="z-index:-1;"></div>

$（函数（）{
$（'#draggable'）.draggable（）；
$（'#droppable1'）。可拖放({
drop：函数（事件、用户界面）
{
$（本）
.append（ui.draggable.css（{position:'relative'，left:'0px'，top:'0px'}））；
}
});
$（'#droppable2'）。可拖放({
drop：函数（事件、用户界面）
{
$（本）
.append（ui.draggable.css（{position:'relative'，left:'0px'，top:'0px'}））；
}
});
});
内容

您可以使用接受过滤器来接受特定可拖放区域中的特定项目

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

您可以将克隆用于draggable选项，而不是在事件克隆中，并附加删除的辅助对象

代码：

---

演示：

缺少的accept是否允许任何可拖动元素被放入其中？是的，如果没有任何accept参数，则它将允许所有可拖动元素，但您需要突出显示邻近可拖动区域，以了解您正在放置的位置。添加hoverClass：“Hightlight”，一些css会说。突出显示{color:red}以检测您将要放置在哪个区域。我确实这样做了，但是droppable1从来不会亮起。在Jqueryui.com上阅读一篇简单的文章会有所帮助。这就是他们的示例说明的内容：使任何DOM元素都可以放置，这是可拖动元素的目标。我以他们为例不，你想要这样的吗@Irvindiminakadward你是如何回答我的三个问题的。谢谢，如果你把它记下来，我会接受的

$(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'
            }));
        }
    });

});