同様の質問がスタックで既に回答されていることは知っていますが、何らかの理由でそれらの解決策がうまくいきません。シンプルなドラッグ アンド ドロップ ゲーム/アクティビティを作成しようとしています。ユーザーは要素のドラッグを 1 回しか試行できないため、一度ドラッグした場合は、関連するドラッグ イベント リスナーを削除したいと考えています。それが理にかなっていることを願っています。コードは次のとおりです。
HTML
<div id="boxes">
<div id="b1" class="box" draggable="true"><header>Vacuum Tubes</header></div>
<div id="b2" class="box" draggable="true"><header> Eniac</header></div>
<div id="b3" class="box" draggable="true"><header> Transistors </header> </div>
<div id="b4" class="box" draggable="true"><header> Integrated Cicuits</header> </div>
<div id="b5" class="box" draggable="true"><header> Microprocessor </header> </div>
</div>
init 関数では、後でドラッグする要素にイベント リスナーを追加しています。
function init(){
cols = document.querySelectorAll('#boxes div.box');
[].forEach.call(cols, function(col) {
boxes.push(col);
states.push("false");
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragend', handleDragEnd, false);}
}
**** ボックス、状態、および列は、init()
関数の外で定義および宣言される配列です。
要素の削除を処理する関数よりも、次のコードがあります
dragSrcEl.removeEventListener('dragstart', handleDragStart, false);
dragSrcEl.removeEventListener('dragend', handleDragEnd, false);
cols[i].removeEventListener('dragstart', handleDragStart, false);
cols[i].removeEventListener('dragend', handleDragEnd, false);
cols[i].draggable=false;
dragSrcEl.draggable=false;
ご覧のとおり、この要素が 3 つの異なる方法でドラッグされるのを防ごうとしています。それでも、うまくいきません。ユーザーは引き続き要素をドラッグできます。
私の質問 1:
どうすればイベント リスナーdragstart
を削除できますか?
私の質問 2:
コードが機能しないのはなぜですか?dragend