1

html5ドラッグ アンド ドロップ APIを使用してカレンダーを作成しています。

と を使用dragEnterしdragLeaveて、受信要素のスタイルを設定し、ドロップパビリティを決定しています。

受信側のドロップ可能な要素には子がありdragLeave、子要素をドラッグすると呼び出されます。この問題は既知であり、ここで説明されています。

私が試みた解決策は、子dragLeaveにイベントを追加しdragEnter、ロジックをparentViewに戻すことでした。

これがコードです。http://jsbin.com/iHaNuPo/17

問題は、子の「dragEnter」が親の「dragLeave」の前に呼び出されることです。

これがイベントの順序です。

#in from outside parent to over child
1. parent-enter 
2. child-enter 
3. parent-leave
#out from over child to outside parent
1. parent-enter
2. child-leave
3. parent-leave

これはバグですか？

dragLeave子供の上にカーソルを置いたときに親のイベントが発生するのを防ぐ Ember 風の方法を知っている人はいますか?

dragLeaveまたは、イベントが発生する順序を修正する方法はありますdragEnterか?

HTML5ネイティブのドラッグアンドドロップを捨てて、jquery uiのドラッグ可能/ドロップ可能を使用する必要がありますか?

編集

これは、Woody's answer による実際の例です。

http://jsbin.com/OjAGabUj/22

4

2 に答える 2

1

Woody のソリューションは正しいと思いますが、数行のコードを節約し、子要素を直接いじる必要を避けたい場合は、参照カウント ソリューションを使用することもできます。

$(".drop-target").on("dragenter dragleave", function (e)
{
  var dragHoverCount = Number($(this).data("dragHoverCount")) || 0;
  (e.type === "dragenter") ? dragHoverCount++ : dragHoverCount--;
  $(this).data("dragHoverCount", dragHoverCount);

  $(this).toggleClass("drag-hover", dragHoverCount > 0);

  e.preventDefault();
});
于 2018-04-29T00:34:06.003 に答える