jQuery droppable-只允许在元素上删除一项，然后使删除的项再次可拖动

使用，我有多个拖拽和下拉以及。一次只允许在一个元素上放置一个Dragable。但是，放置后，应再次为可拖动设备提供拖动功能。 我面临的问题是，可以在一个元素上删除多个draggable。我的代码如下：

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

如何做到这一点

PS：也有类似的问题，但没有一个能很好地解决我的问题。例如，问题试图解决它。但这里的问题是：被删除的元素与被删除的元素没有相同的对齐方式

编辑：

---

我在CSS中做了一个JSFIDLE修改。

正如我在评论中提到的，当项目被删除时，您可以禁用或销毁Dropable。这将防止进一步下降。您还可以更改

accept

选项，使其不再接受任何内容

以下是第一个解决方案的示例：

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中，禁用Dropable。然后可以在“拖动开始”中启用它。@Twisty，如何在“拖动开始”中启用它？有代码吗？@Twisty，my

drop

事件调用函数

handledropevent

。因此，我可以在函数末尾添加这一行：

$（“.droppable”）.droppable（“disable”）。我说的对吗？拖拽设备只能放在可升降设备中，还是放在其他任何地方？@TJ，只能放在可升降设备上
    $(".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');


    }

});

$(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
  });
});