3

draggablediv をdivにドラッグすると、droppable1常に div に配置されdroppable2ます。

さらに、jQuery UI スナップバック オプションに従いましたが、機能しません。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>
4

2 に答える 2

3

受け入れフィルターを使用して、特定のドロップ可能領域の特定のアイテムを受け入れることができます。

$( '#droppable1' ).droppable({
      accept: '#draggable',
      drop: function(event, ui)
      {
        $(this)
          .append(ui.draggable.css({position: 'relative', left: '0px', top: '0px'}));
      }
    });
于 2013-10-08T15:17:43.677 に答える
2

helperイベントクローンよりもドラッグ可能なオプションにクローンを使用しdropて、ドロップされたヘルパーを追加できます。

コード：

$(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/

于 2013-10-08T15:39:58.210 に答える