0

ドラッグ アンド ドロップ システムを使用して Web ページを作成しています。

  • 3 つのボタンのリストがあり、それぞれがドラッグ可能で、配列にドロップできます。
  • この配列では、TDS はドロップ可能であり、前のリストからのボタン、または配列に既に配置されているボタン (列を切り替えるため) を受け取ることができます。
  • ボタンの位置をリセットするために、リストもドロップ可能であるため、配列から来る既に配置されたボタンでのみ使用できます。

すべてが正常に機能しています。次のステップに進むために、これら 3 つのボタンが配列にドロップされているかどうかを知りたいです。ドラッグされた要素がドロップされてドロップイベント
に渡されると、その要素が複製されるという印象が強いです。ドロップされた要素はまだ初期リストに存在しますが (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であることを確認してください

  • ボタンを2つの列の間で切り替えると、ドロップイベントにもう1つのボタンがあるとDOMに認識させます（元の場所からボタンを削除する前に、ボタンを新しい位置に複製します）->どちらも良い解決策ではありません

では、ドラッグ可能なすべての要素が実際に配列にドロップされていることを確認するにはどうすればよいでしょうか?

前もって感謝します ！

ジュリアン・Q.

4

1 に答える 1

1

コメントを回答に移動します。helper: "clone",ドラッグしたアイテムはクローンです。これを削除すると、問題を解決できます。

于 2016-06-10T16:43:50.737 に答える