☰

子要素にマウスを移動すると HTML5 dragleave が起動される 質問する

tag-icon • tag-icon javascript jquery html drag-and-drop jquery-events
子要素にマウスを移動すると HTML5 dragleave が起動される 質問する

私が抱えている問題は、あるdragleave要素の子要素にマウスをホバーすると、その要素のイベントが起動されることです。また、dragenter親要素に再度マウスをホバーしても、イベントは起動されません。

簡略化したフィドルを作りました:http://jsfiddle.net/pimvdb/HU6Mk/1/。

HTML:

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

次の JavaScript を使用します。

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 dragleave: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });

div本来の目的は、何かをそこにドラッグしたときにドロップを赤くしてユーザーに通知することです。これは機能しますが、p子にドラッグするとdragleaveが起動し、 はdiv赤ではなくなります。ドロップに戻っても、再び赤くなりません。ドロップから完全に出て、再びドロップにドラッグして、赤くするdiv必要があります。div

dragleave子要素にドラッグしたときに実行されないようにすることは可能ですか?

2017 年更新:pointer-events: none; TL;DR、最新のブラウザーと IE11 で動作する、以下の @HD の回答に記載されているCSS を調べてください。

ベストアンサー1

参照カウンターを保持し、dragenter を取得したときにそれを増やし、dragleave を取得したときにそれを減らすだけです。カウンターが 0 になったら、クラスを削除します。

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter++;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

注: ドロップ イベントでは、カウンターをゼロにリセットし、追加されたクラスをクリアします。

実行できますここ

おすすめ記事