0

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

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

一切正常，现在我想知道这 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">

根据我的测试：

  • 当我将一个按钮从列表移动到数组时，在 drop 事件结束时，DOM 仍然看到列表中剩余 3 个按钮，但已经看到 1 个按钮被丢弃在数组中 --> 计算剩余按钮不是解决方案确保剩余 0 个元素

  • 当我在两列之间切换按钮时，它使 DOM 认为在 drop 事件中还有一个按钮（在从原始位置删除按钮之前将按钮克隆到新位置）--> 也不是一个好的解决方案

那么我能做些什么来确保我所有的可拖动元素实际上都放在了我的数组中呢？

提前致谢 ！

朱利安 Q.

4

1 回答 1

1

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

于 2016-06-10T16:43:50.737 回答