如何确保每个可拖动元素都已使用 jQuery droppable 删除

Question

我正在制作一个带有拖放系统的网页。

我有一个包含 3 个按钮的列表，每个按钮都是 可拖动，并且可以放入数组中。
在这个数组中，TDS 是 droppable 并且可以接收来自上一个列表的按钮，或者已经放置在数组中的按钮（以在列之间切换）。
该列表也是 droppable，用于重置按钮的位置，因此仅适用于来自数组的已放置按钮。

一切正常，现在我想知道这 3 个按钮是否已放入数组中以启用下一步。
我有一个强烈的印象，即拖动的元素在被放下并传递到 drop 事件时被克隆。丢弃的元素仍然存在于初始列表中（来自 DOM PoV），但也已经存在于数组中（来自 DOM PoV）

这里是测试代码，console.log看元素号：

$(document).ready(function() {

  $('.item-draggable').draggable({
    revert: "invalid",
    containment: "document",
    helper: "clone",
    cursor: "move"
  });


  $('.area-droppable').droppable({
    accept: ".item-draggable",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
      $(this).html(ui.draggable);

      console.log('nb element still to be dropped : ' + $('#items-draggable div').length);
      console.log('nb element already dropped placed : ' + $('.area-droppable div').length);

      /*if($('#items-draggable div').length === 0)
    $('#validate-step').removeAttr('disabled');
   else
    $('#validate-step').attr('disabled','disabled');*/

    }
  });
  
  $('#items-draggable').droppable({
   accept: ".area-droppable div.item-draggable",
   activeClass: "ui-state-highlight",
   drop: function( event, ui ) {
    $(this).append(ui.draggable);
    $('#validate-step').attr('disabled','disabled');
   }
  });

});

#items-draggable {
  border: 1px dashed black;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 10px;
  min-height: 57px;
}
.item-draggable {
  margin: 0 2px;
  cursor: move;
}
.table-csv {
  width: 100%;
}
.table-csv tr {
  border: 1px solid blue !important;
}
.table-csv td {
  border: 1px solid blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div id="items-draggable">
  <div class="btn btn-default item-draggable" id="btn1">BTN1</div>
  <div class="btn btn-default item-draggable" id="btn2">BTN2</div>
  <div class="btn btn-default item-draggable" id="btn3">BTN3</div>
</div>

<div id="table-csv-container">
  <div class="table-responsive">
    <table class="table table-csv" id="table-csv">
      <tbody>
        <tr>
          <td class="area-droppable td td-1" id="td-droppable-1">&nbsp;</td>
          <td class="area-droppable td td-2" id="td-droppable-2">&nbsp;</td>
          <td class="area-droppable td td-3" id="td-droppable-3">&nbsp;</td>
          <td class="area-droppable td td-4" id="td-droppable-4">&nbsp;</td>
          <td class="area-droppable td td-5" id="td-droppable-5">&nbsp;</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<input type="button" class="btn btn-success" disabled="disabled" id="validate-step" value="Validate">

来自我的测试：

当我将一个按钮从列表移动到数组时，在放置事件结束时，DOM 仍然看到列表中剩余 3 个按钮，但已经看到 1 个按钮被放下在数组中 --> 计算剩余按钮不是确保剩余 0 个元素的解决方案
当我在两列之间切换一个按钮时，它使 DOM 认为在放下事件中还有一个按钮（在从原始按钮中删除之前将按钮克隆到新位置place) --> 那里也不是一个好的解决方案

那么我该怎么做才能确保我的所有可拖动元素实际上都已放入我的数组中？

提前致谢！

朱利安 Q.

Answer 1

将我的评论移至答案。您有 helper: "clone",，所以拖动的项目是一个克隆。删除它可以解决问题。

如何确保每个可拖动元素都已使用 jQuery droppable 删除

How to be sure every draggable elements have been dropped with jQuery droppable

jquery

drag-and-drop

jquery-ui

jquery-droppable

jquery-events