Question

我正在制作一个带有拖动和放大器的网页。放下系统。

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

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

以下是测试它的代码，console.log查看元素编号：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

从我的测试：

当我将一个按钮从列表移动到数组时，在放置事件结束时，DOM仍然看到列表中剩余3个按钮，但已经看到1个按钮被放入数组中 - ＆gt;计算剩余按钮不是解决方案，以确保剩余0个元素
当我在两列之间切换按钮时，它会让DOM认为在drop事件中还有一个按钮（在从原始位置移除按钮之前将按钮克隆到新位置） - ＆gt;

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

提前致谢！

朱利安Q。

Answer 1

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

如何确保每个可拖动的元素都被jQuery droppable删除

1 个答案: