1

私はここに例を作りました：

http://jsfiddle.net/NQQL6/

リンクのドラッグを開始すると、カートが緑色に変わります。アイテムをカートの上にドラッグすると、カートが赤くなります。

これは機能しますが、カートが空の場合のみ:|

その中に他の要素がある場合leave、アイテムをそれらの要素の上にドラッグするとトリガーされるようです。どうすればそれを防ぐことができますか？

documentイベントリスナーを要素に移動しようとしましたevent.targetが、の子または孫であるかどうかを確認しましたが、アイテムがカートゾーン内にある場合でもランダムにトリガーされるように見えるcartため、想定されていないときにクラスが削除されます:(leavebody

編集:ここでいくつかのハッキーなソリューションが見つかりました: 子要素をドラッグすると、親要素の「ドラッグリーブ」が発生します

このQを削除できます:)

4

2 に答える 2

1

ゲームに少し遅れて、おそらくこれを解決しましたが、参照カウンターを保持して、dragleave/dragenter イベントをカウントする必要があります。

var counter = 0;

cart.addEventListener('dragenter', function(event){  
    counter++;
    cart.classList.add('ontop', 'activate');
    console.log('enter');
});

cart.addEventListener('dragleave', function(event){
  counter--;
  if (counter === 0) {
    cart.classList.remove('ontop');
  }
  console.log('leave');
});

こちらをご覧ください

この回答も参照してください。

于 2015-05-16T12:59:23.970 に答える
1

次の css をリストに適用する必要があります。

ul{ pointer-events: none; }

この更新されたフィドルを参照してください。

http://jsfiddle.net/NQQL6/1/

編集：これを試してください、http://jsfiddle.net/NQQL6/6/

js ロジックが少し増えましたが、今は動作するはずです。

于 2013-06-02T14:52:02.947 に答える