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

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 question 试图解决它。但是这里的问题是：被丢弃的元素与它被丢弃的元素没有相同的对齐方式。

编辑： 我做了一个 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
  });
});

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

1. 销毁droppable
2. 对齐可拖动对象，然后将其附加到容器中
3. 销毁可拖动对象
4. 在drag 事件开始时分配 Draggable 并重新分配 Droppable

希望对您有所帮助。