jQueryUI多个可放置元素 [英] jQueryUI Multiple droppable elements

问题描述

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

How come when I drag my draggable div to droppable1 div it always gets placed in droppable2 div.

此外，我遵循了jQuery UI snap-back选项，但是它不起作用.我该怎么做，而不是拖动实际的draggable元素，而是拖动它的实例/副本，并让droppable接受多个这些draggable元素.

In addition I followed the jQuery UI snap-back option but it does not work. How could I make it that instead of dragging the actual draggable element it drags an instance/copy of it and have droppable accept multiple of these draggable elements.

<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>

推荐答案

您可以使用克隆 helper 作为可拖动选项，而不是 drop 事件克隆并附加已删除的帮助器.

You can use a clone helper for the draggable option, than in the drop event clone and append the dropped 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/

这篇关于jQueryUI多个可放置元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！