0

同様の質問がスタックで既に回答されていることは知っていますが、何らかの理由でそれらの解決策がうまくいきません。シンプルなドラッグ アンド ドロップ ゲーム/アクティビティを作成しようとしています。ユーザーは要素のドラッグを 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

4

2 に答える 2

0

まず、構文を確認してください。あなたの js を jsfiddle に入れて、インタープリターを実行しました。console.log を見ると、構文エラーが表示されます。

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);
}); /* <--- Check this here. */
}
init();
console.log($('#boxes > div.box'));

次に、jslint の後にそれを実行すると (これで問題ありません)、プッシュ関数には TypeError のみが表示されます。

チアーズ レイドバック

于 2012-06-14T22:38:19.687 に答える