Question

使用jQuery droppable，我同时具有多个可拖动对象和可放置对象。一次只能将一个可拖动对象拖放到一个元素上。但是，放置后，应再次为可拖动对象赋予拖动功能。我面临的问题是，多个可拖动对象可以放在一个元素上。我的代码如下：

<div id="draggable_all" style="float: left;  width: 300px;">
<div class="draggable">drag1111</div>
<div class="draggable">drag2222</div>
<div class="draggable">drag3333</div>
</div>

<div id="droppable_all" style="float: left; width:300px; ">



<div class="droppable"></div>
<div class="droppable"></div>
<div class="droppable"></div>
</div>

CSS：

 <style type="text/css">
        .droppable {
            width: 120px;
            height: 120px;
            background: red;
            margin-bottom: 30px;
            /*position: absolute;*/
            /*right: 0;*/
            /*bottom: 0;*/
        }
        .draggable {
            /*position: absolute;*/
            z-index: 9;
            /*top: 25px;*/
            /*left: 20px;*/
            width: 120px;
            height: 120px;
            background-color: green;
            margin-bottom: 30px;
        }
    </style>

和JS：

$（document）.ready（function（）{

    $(".draggable").draggable({
        revert: handleRevert
    });

    $(".draggable").data("orDraggable",$(".draggable").offset());

    $(".droppable").droppable({
        drop: handleDropEvent
        //,
        // out: function(event, ui){
        //     $(this).droppable('option', 'accept', '.drag-item');
        // }
    });

    function handleRevert(e) {
        if (e === false) {
            $(this).data("uiDraggable").originalPosition = $(this).data("orDraggable");
            return true
        }
    }

    function handleDropEvent(event, ui) {
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });

        //$(this).droppable('option', 'accept', ui.draggable);
       // $(this).droppable('disable');


    }

});

如何实现？

PS：SO有类似的问题，但没有一个能很好地解决我的问题。例如，this问题试图解决它。但是这里的问题是：放置的元素与放置元素的对齐方式不同。

编辑： 我做了一个jsfiddle here，但CSS有所变化。

Answer 1

正如我在评论中提到的那样，您可以在放置物品时禁用或销毁Droppable。这将防止进一步掉落。您还可以更改accept选项，以便您不再愿意接受它。

以下是第一个解决方案的示例：https://jsfiddle.net/Twisty/upfy74tw/12/

JavaScript

$(function() {
  function handleRevert(e) {
    var $t = $(this);
    if (e === false) {
      $t.data("uiDraggable").originalPosition = $t.data("orDraggable");
      return true
    }
  }

  function handleDropEvent(event, ui) {
    var $self = $(this);
    var $item = ui.draggable;
    $item.position({
      my: 'left top',
      at: 'left top',
      of: $self
    });
    $self.droppable("destroy");
    $item.appendTo($self).attr("style", "");
    $item.draggable("destroy");
    $item.draggable({
      start: function() {
        $self.droppable({
          drop: handleDropEvent
        });
      }
    })
  }

  $(".draggable").draggable({
    revert: handleRevert
  });

  $(".draggable").data("orDraggable", $(".draggable").offset());

  $(".droppable").droppable({
    drop: handleDropEvent
  });
});

您的放置事件中发生了一些事情。

销毁可滴剂
对齐可拖动对象，然后将其附加到容器中
销毁可拖动
在drag事件开始时分配可拖动的对象并重新分配可放置的对象

希望有帮助。

jQuery droppable-只允许将一项拖放到元素上，然后再次使拖放的项可拖动

1 个答案: