Jquery

親要素の「ドラッグリーブ」は、子要素をドラッグすると発生します



Dragleaveof Parent Element Fires When Dragging Over Children Elements



解決：

イベントを子要素にバインドする必要がない場合は、いつでもpointer-eventsプロパティを使用できます。

.child-elements {ポインタイベント：なし; } 
私はついに私が満足している解決策を見つけました。私は実際に私がやりたいことをするためのいくつかの方法を見つけましたが、現在の解決策ほど成功したものはありませんでした... 1つの解決策では、境界線を追加/削除した結果として頻繁にちらつきが発生しました#dropzone要素...別の例では、ブラウザから離れたときに境界線が削除されることはありませんでした。

 
 
とにかく、私の最高のハッキーな解決策はこれです：
 
var dragging = 0; attachEvent（window、 'dragenter'、function（event）{dragging ++; $（dropzone）.addClass（ 'drag-n-drop-hover'）; event.stopPropagation（）; event.preventDefault（）; return false;}） ; attachEvent（window、 'dragover'、function（event）{$（dropzone）.addClass（ 'drag-n-drop-hover'）; event.stopPropagation（）; event.preventDefault（）; return false;}）; attachEvent（window、 'dragleave'、function（event）{dragging--; if（dragging === 0）{$（dropzone）.removeClass（ 'drag-n-drop-hover'）;} event.stopPropagation（） ; event.preventDefault（）; return false;}）;
これはかなりうまく機能しますが、Firefoxが二重呼び出しであったため、Firefoxで問題が発生しましたドラッグエンターなので、カウンターがオフになりました。しかし、それにもかかわらず、それはあまりエレガントな解決策ではありません。
 
 
 
それから私はこの質問に出くわしました：ウィンドウの外にドラッグするときにFirefoxでdragleaveイベントを検出する方法
 
だから私は答えを取り、それを私の状況に適用しました：
 
$ .fn.dndhover = function（options）{return this.each（function（）{var self = $（this）; var collection = $（）; self.on（ 'dragenter'、function（event）{if（ collection.size（）=== 0）{self.trigger（ 'dndHoverStart'）;} collection = collection.add（event.target）;}）; self.on（ 'dragleave'、function（event）{/ * * Firefox 3.6は、前の要素でdragleaveイベントを発生させます*次の要素でdragenterを発生させる前に、遅延を導入します* / setTimeout（function（）{collection = collection.not（event.target）; if（collection.size（） === 0）{self.trigger（ 'dndHoverEnd'）;}}、1）;}）;}）; }; $（ '＃dropzone'）。dndhover（）。on（{'dndHoverStart'：function（event）{$（ '＃dropzone'）。addClass（ 'drag-n-drop-hover'）; event.stopPropagation（） ; event.preventDefault（）; return false;}、 'dndHoverEnd'：function（event）{$（ '＃dropzone'）。removeClass（ 'drag-n-drop-hover'）; event.stopPropagation（）; event。 PreventDefault（）; return false;}}）;
これはクリーンでエレガントで、これまでにテストしたすべてのブラウザーで機能しているようです（IEはまだテストしていません）。
 
 
  
これは少し醜いですが、それはくそったれに動作します！...
 
'dragenter'ハンドラーにevent.targetを（クロージャー内の変数などに）格納し、次に 'dragleave'ハンドラーに、event.target ===格納したコードの場合にのみコードを起動します。
 
'dragenter'が起動したくないときに起動している場合（つまり、子要素を残した後に起動している場合）、マウスが親を離れる前に最後に起動したときは、親上にあるため、親は常に意図した「ドラッグリーブ」の前の最後の「ドラジェンター」。
 
（function（）{var droppable = $（ '＃droppable'）、lastenter; droppable.on（ 'dragenter'、function（event）{lastenter = event.target; droppable.addClass（ 'drag-over'）;}） ; droppable.on（ 'dragleave'、function（event）{if（lastenter === event.target）{droppable.removeClass（ 'drag-over'）;}}）;}（））;