jQueryUI 多个可放置元素

怎么当我拖着我的draggable div to droppable1div 它总是被放置在droppable2 div.

另外，我遵循了 jQuery UI snap-back 选项，但它不起作用。我怎样才能做到这一点而不是拖拉实际的draggable它拖动它的实例/副本的元素并具有droppable接受其中的多个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>

您可以使用accept过滤器以接受特定可放置区域中的特定项目。

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