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

概観

次のHTML構造があり、dragenterおよびdragleaveイベントを<div id="dropzone">要素にアタッチしました。

<div id="dropzone">
    <div id="dropzone-content">
        <div id="drag-n-drop">
            <div class="text">this is some text</div>
            <div class="text">this is a container with text and images</div>
        </div>
    </div>
</div>

問題

私は上のファイルをドラッグすると<div id="dropzone">、dragenter期待通りにイベントが発生します。私は子要素の上に私のマウスを移動すると、しかし、のような<div id="drag-n-drop">、dragenterイベントが焼成された<div id="drag-n-drop">要素と、その後dragleaveのイベントがために解雇される<div id="dropzone">要素。

<div id="dropzone">要素に再びカーソルを合わせると、dragenterイベントが再び発生しますが、これはクールですがdragleave、子要素の残りのイベントが発生するため、removeClass命令は実行されます。

この動作には2つの理由で問題があります。

1. dragenter＆dragleaveをアタッチしているだけな<div id="dropzone">ので、子要素にこれらのイベントもアタッチされている理由がわかりません。

2. <div id="dropzone">子の上にカーソルを置いている間も要素をドラッグしているのでdragleave、発砲したくありません！

jsFiddle

jsFiddleをいじくり回します。 http

質問

だから...どうすれば、<div id="dropzone">要素の上にファイルをドラッグしているときにdragleave、子要素の上にドラッグしていても起動しないようにすることができます...要素を離れたときにのみ起動する必要があり<div id="dropzone">ます。要素の境界内の任意の場所でホバリング/ドラッグしても、イベントはトリガーされませんdragleave。

これは、少なくともHTML5のドラッグアンドドロップをサポートするブラウザーでは、ブラウザー間の互換性が必要なので、この答えは適切ではありません。

GoogleとDropboxはこれを理解しているようですが、それらのソースコードは縮小化/複雑化されているため、実装からこれを理解することができませんでした。

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

.child-elements {
  pointer-events: none;
}

ようやく、満足できる解決策を見つけました。実際にいくつかの方法を見つけましたが、現在の解決策ほどうまくいかなかったものがあります。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で問題が発生dragenterしました。これは、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 fires the dragleave event on the previous element
             * before firing dragenter on the next one so we introduce a delay
             */
            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");
        }
    });

}());

最初、私は人々がそのpointer-events: noneアプローチを捨てることに同意しました。しかし、私は自分自身に尋ねました：

ドラッグの進行中に子要素を操作するために、ポインタイベントが本当に必要ですか？

私の場合、子供たちにはたくさんのことが起こっています。たとえば、ホバーして追加のアクションのボタンを表示したり、インライン編集をしたりします。しかし、ドラッグ中に必要なことはなく、実際には望まれていません。

私の場合、私は次のようなものを使用して、親コンテナーのすべての子ノードに対してポインターイベントを選択的にオフにします。

  div.drag-target-parent-container.dragging-in-progress * {
    pointer-events: none;
  }

お好みの方法を使用してdragging-in-progress、dragEnter/ dragLeaveイベントハンドラーでクラスを追加/削除しますdragStart。al。

これはChromeのバグのようです。

私が考えることができる唯一の回避策は、イベントをキャプチャする透明なオーバーレイ要素を作成することでした： http //jsfiddle.net/yYF3S/10/

JS：

$(document).ready(function() {
    var dropzone = $('#overlay');

    dropzone.on('dragenter', function(event) {
        $('#dropzone-highlight').addClass('dnd-hover');
    });

    dropzone.on('dragleave', function(event) {
        $('#dropzone-highlight').removeClass('dnd-hover');
    });

});​

HTML：

<div id="dropzone-highlight">
    <div id="overlay"></div>

    <div id="dropzone" class="zone">
        <div id="drag-n-drop">
            <div class="text1">this is some text</div>
            <div class="text2">this is a container with text and images</div>
        </div>
    </div>
</div>

<h2 draggable="true">Drag me</h2>
​

問題は、ドロップゾーン内の要素はもちろんドロップゾーンの一部であり、子を入力すると親から離れることです。これを解決するのは簡単ではありません。子にイベントを追加して、親にクラスを再度追加してみてください。

$("#dropzone,#dropzone *").on('dragenter', function(event) {

    // add a class to #dropzone

    event.stopPropagation(); // might not be necessary
    event.preventDefault();
    return false;
});

イベントは引き続き複数回発生しますが、誰も表示しません。

//編集：dragmoveイベントを使用して、dragleaveイベントを永続的に上書きします。

$("#dropzone,#dropzone *").on('dragenter dragover', function(event) {

    // add a class to #dropzone

    event.stopPropagation(); // might not be necessary
    event.preventDefault();
    return false;
});

ドロップゾーンに対してのみdragleaveイベントを定義します。

以下のようbenrがで述べたこの答えは、イベントに火災に子ノードを防ぐことができますが、あなたには、いくつかのイベントをバインドする必要がある場合は、次の操作を行います。

#dropzone.dragover *{
   pointer-events: none;
}

そして、これをJSコードに追加してください：

$("#dropzone").on("dragover", function (event) {
   $("#dropzone").addClass("dragover");
});

$("#dropzone").on("dragleave", function (event) {
   $("#dropzone").removeClass("dragover");
});

jQueryを使用している場合は、これを確認してください。 ご覧ください。https //github.com/dancork/jquery.event.dragout

それは本当に素晴らしいです。

真のドラッグリーブ機能を処理するために作成された特別なイベント。

HTML5 dragleaveイベントは、マウスアウトのように機能します。このプラグインは、ドラッグ中のマウスリーブスタイルの機能を複製するために作成されました。

使用例：

$（ '＃myelement'）。on（ 'dragout'、function（event）{//あなたのコード}）;

編集：実際には、それはjQueryに依存しているとは思いません、おそらくそれなしでもコードを使用できます。

@hristo私ははるかにエレガントな解決策を持っています。それがあなたが使えるものかどうかを確認してください。

結局あなたの努力は無駄になりませんでした。最初はなんとか使いましたが、FF、Chromeで別の問題がありました。多くの時間を費やした後、私はその提案を意図したとおりに機能させました。

実装方法は次のとおりです。また、視覚的な手がかりを利用して、ドロップゾーンについてユーザーを正しくガイドしました。

$(document).on('dragstart dragenter dragover', function(event) {    
    // Only file drag-n-drops allowed, http://jsfiddle.net/guYWx/16/
    if ($.inArray('Files', event.originalEvent.dataTransfer.types) > -1) {
        // Needed to allow effectAllowed, dropEffect to take effect
        event.stopPropagation();
        // Needed to allow effectAllowed, dropEffect to take effect
        event.preventDefault();

        $('.dropzone').addClass('dropzone-hilight').show();     // Hilight the drop zone
        dropZoneVisible= true;

        // http://www.html5rocks.com/en/tutorials/dnd/basics/
        // http://api.jquery.com/category/events/event-object/
        event.originalEvent.dataTransfer.effectAllowed= 'none';
        event.originalEvent.dataTransfer.dropEffect= 'none';

         // .dropzone .message
        if($(event.target).hasClass('dropzone') || $(event.target).hasClass('message')) {
            event.originalEvent.dataTransfer.effectAllowed= 'copyMove';
            event.originalEvent.dataTransfer.dropEffect= 'move';
        } 
    }
}).on('drop dragleave dragend', function (event) {  
    dropZoneVisible= false;

    clearTimeout(dropZoneTimer);
    dropZoneTimer= setTimeout( function(){
        if( !dropZoneVisible ) {
            $('.dropzone').hide().removeClass('dropzone-hilight'); 
        }
    }, dropZoneHideDelay); // dropZoneHideDelay= 70, but anything above 50 is better
});

私の2セント：ドロップゾーンの上にレイヤーを非表示にし、dragenter時にレイヤーを表示し、その上にドラッグリーブをターゲットにします。

デモ：https : //jsfiddle.net/t6q4shat/

HTML

<div class="drop-zone">
  <h2 class="drop-here">Drop here</h2>
  <h2 class="drop-now">Drop now!</h2>
  <p>Or <a href="#">browse a file</a></p>
  <div class="drop-layer"></div>
</div>

CSS

.drop-zone{
  padding:50px;
  border:2px dashed #999;
  text-align:center;
  position:relative;
}
.drop-layer{
  display:none;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:5;
}
.drop-now{
  display:none;
}

JS

$('.drop-zone').on('dragenter', function(e){
    $('.drop-here').css('display','none');
    $('.drop-now').css('display','block');
    $(this).find('.drop-layer').css('display','block');
    return false;
});

$('.drop-layer').on('dragleave', function(e){
    $('.drop-here').css('display','block');
    $('.drop-now').css('display','none');
    $(this).css('display','none');
    return false;
});

だから私にとってアプローチ pointer-events: none;はあまりうまくいきませんでした...だからここに私の代替ソリューションがあります：

    #dropzone {
        position: relative;
    }

    #dropzone(.active)::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
    }

この方法では、 dragleave、（子の）親またはdragover子要素。お役に立てれば ：）

* I dragenterまたはのときに追加する「.active」クラスdragleave。しかし、それなしで作業している場合は、クラスを離れてください。

これに対する非常にシンプルなクイックフィックス。広範囲にテストされていませんが、現在Chromeで動作します。

失礼しました。

  dragEndTimer = no

  document.addEventListener 'dragover', (event) ->
    clearTimeout dragEndTimer
    $('body').addClass 'dragging'
    event.preventDefault()
    return no

  document.addEventListener 'dragenter', (event) ->
    $('section').scrollTop(0)
    clearTimeout dragEndTimer
    $('body').addClass 'dragging'

  document.addEventListener 'dragleave', (event) ->
    dragEndTimer = setTimeout ->
      $('body').removeClass 'dragging'
    , 50

これにより、Chromeのちらつきのバグが修正されます。少なくとも、問題の原因となっていたその順列が修正されます。

この答えはここにあります：

子要素にカーソルを合わせるとHTML5 dragleaveが発生する

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');
        }
    }
});

私のバージョン：

$(".dropzone").bind("dragover", function(e){
    console.log('dragover');
});

$(".dropzone").bind("dragleave", function(e) {
  var stopDrag = false;
  if (!e.relatedTarget) stopDrag = true;
  else {
    var parentDrop = $(e.relatedTarget).parents('.dropzone');
    if (e.relatedTarget != this && !parentDrop.length) stopDrag = true;
  }

  if (stopDrag) {
    console.log('dragleave');
  }
});

このレイアウトでは：

<div class="dropzone">
  <div class="inner-zone">Inner-zone</div>
</div>

私はのための要素クラスのダンプを作ったe.target、e.currentTarget、e.relatedTarget両方のためにdragoverとdragleaveイベント。

親ブロック（.dropzone）を離れると、e.relatedTargetこのブロックの子ではないので、ドロップゾーンの外にいることがわかりました。

ここで、最も簡単な解決策の1つ●︿●

このフィドルを見てください<-ボックス内にファイルをドラッグしてみてください

あなたはこのようなことをすることができます：

var dropZone= document.getElementById('box');
var dropMask = document.getElementById('drop-mask');


dropZone.addEventListener('dragover', drag_over, false);
dropMask.addEventListener('dragleave', drag_leave, false);
dropMask.addEventListener('drop', drag_drop, false);

それによって、ここで何が起こっているかをすでに知っているはずです。
フィドルをご覧ください。

私は同様の問題を抱えていて、次のように修正しました：

問題：関数「drop（ev）」は、ユーザーが「ドロップゾーン」（ul要素）に要素をドロップしたときに発生しますが、残念ながら、その要素がその子（li要素）の1つにドロップされたときにも発生します。

修正：

function drop(ev) { 
ev.preventDefault(); 
data=ev.dataTransfer.getData('Text'); 
if(ev.target=="[object HTMLLIElement]")  
{ev.target.parentNode.appendChild(document.getElementById(data));}
else{ev.target.appendChild(document.getElementById(data));} 
} 

ユーザーがファイルをスペースにドラッグしたときにボックスの色が変化するファイルアップロードボックスに対して、これを自分で実装しようとしました。

JavaScriptとCSSをうまく組み合わせたソリューションを見つけました。divID が付いたドロップ可能なゾーンがあるとし#dropます。これをJavascriptに追加します。

$('#drop').on('dragenter', function() {
    $(this).addClass('dragover');
    $(this).children().addClass('inactive');
});

$('#drop').on('dragleave', function() {
    $(this).removeClass('dragover');
    $(this).children().removeClass('inactive');
});

次に、これをCSSに追加して、すべての子will classを非アクティブ化します.inactive。

#drop *.inactive {
    pointer-events: none;
}

したがって、ユーザーがボックスの上に要素をドラッグしている限り、子要素は非アクティブになります。

子要素の制御を失いたくないので、ここに示した回避策のいずれにも満足しませんでした。

したがって、私は別のロジックアプローチを使用して、それをjquery-draghandlerと呼ばれるjQueryプラグインに変換しました。DOMを絶対に操作しないため、高いパフォーマンスが保証されます。使い方は簡単です：

$(document).ready(function() {

    $(selector).draghandler({
        onDragEnter: function() {
            // $(this).doSomething();
        },
        onDragLeave: function() {
            // $(this).doSomethingElse();
        }
    });

});

DOMの機能を損なうことなく、問題を完璧に処理します。

Gitリポジトリーのダウンロード、詳細、説明。

私は実際にhttps://github.com/lolmaus/jquery.dragbetter/で見たものを好みますしかし、可能な代替案を共有したかった。私の一般的な戦略は、（バブリングによって）ドラッグゾーンまたはその子にドラッグ入力するときに、ドロップゾーン（子ではない）に背景スタイルを適用することでした。次に、ドロップゾーンをドラッグリーブするときにスタイルを削除します。子に移動するときに、ドロップゾーンからスタイルを削除しても（ドラッグリーブが発火します）、任意の子をドラッグして親のドロップゾーンにスタイルを再適用するだけです。もちろん問題は、dropzoneからdropzoneの子に移動すると、dragleaveの前にdragenterが子で発生するため、スタイルが順不同に適用されることです。私のための解決策は、タイマーを使用してdragenterイベントをメッセージキューに強制的に戻し、dragleaveの後で処理できるようにすることでした。クロージャーを使用して、タイマーコールバックでイベントにアクセスしました。

$('.dropzone').on('dragenter', function(event) {
  (function (event) {
    setTimeout(function () {
      $(event.target).closest('.dropzone').addClass('highlight');
    }, 0);
  }) (event.originalEvent); 
});

これはChrome、つまりFirefoxで機能するようで、ドロップゾーンの子の数に関係なく機能します。イベントの再シーケンスを保証するタイムアウトについては少し不安ですが、私のユースケースではかなりうまくいくようです。

私はこれを自分で実装しようとしていましたが、Jqueryもプラグインも必要ありませんでした。

私がファイルのアップロードを処理したかったので、次のようにして自分に最適だと考えました。

ファイル構造：

--- / uploads {アップロードディレクトリ}

--- /js/slyupload.js {JavaScriptファイル。}

--- index.php

--- upload.php

--- styles.css {ちょっとしたスタイリング..}

HTMLコード：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>my Dzone Upload...</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div id="uploads"></div>        
    <div class="dropzone" id="dropzone">Drop files here to upload</div>     
    <script type="text/javascript" src="js/slyupload.js"></script>      
</body>
</html>

次に、これは添付のJavaScriptファイルです:: 'js / slyupload.js'

<!-- begin snippet:  -->

<!-- language: lang-js -->

    // JavaScript Document

    //ondragover, ondragleave...


    (function(){        

        var dropzone = document.getElementById('dropzone');
        var intv;

        function displayUploads(data){
            //console.log(data, data.length);
            var uploads = document.getElementById('uploads'),anchor,x;

            for(x=0; x < data.length; x++){

                //alert(data[x].file);
                anchor = document.createElement('a');
                anchor.href = data[x].file;
                anchor.innerText = data[x].name;

                uploads.appendChild(anchor);
            }               
        }

        function upload(files){
            //console.log(files);
            var formData = new FormData(), 
                xhr      = new XMLHttpRequest(),    //for ajax calls...
                x;                                  //for the loop..

                for(x=0;x<files.length; x++){
                    formData.append('file[]', files[x]);

                    /*//do this for every file...
                    xhr = new XMLHttpRequest();

                    //open... and send individually..
                    xhr.open('post', 'upload.php');
                    xhr.send(formData);*/
                }

                xhr.onload = function(){
                    var data = JSON.parse(this.responseText);   //whatever comes from our php..
                    //console.log(data);
                    displayUploads(data);

                    //clear the interval when upload completes... 
                    clearInterval(intv);
                }                   

                xhr.onerror = function(){
                    console.log(xhr.status);
                }

                //use this to send all together.. and disable the xhr sending above...

                //open... and send individually..
                intv = setInterval(updateProgress, 50);
                xhr.open('post', 'upload.php');
                xhr.send(formData);

                //update progress... 
                 /* */                   
        }

        function updateProgress(){
            console.log('hello');
         }          

        dropzone.ondrop = function(e){
            e.preventDefault(); //prevent the default behaviour.. of displaying images when dropped...
            this.className = 'dropzone';
            //we can now call the uploading... 
            upload(e.dataTransfer.files); //the event has a data transfer object...
        }

        dropzone.ondragover = function(){
            //console.log('hello');
            this.className = 'dropzone dragover';
            return false;
        }

        dropzone.ondragleave = function(){
            this.className = 'dropzone';
            return false;
        }           
    }(window));

CSS：

body{
	font-family:Arial, Helvetica, sans-serif; 
	font-size:12px;
}

.dropzone{
	width:300px; 
	height:300px;
	border:2px dashed #ccc;
	color:#ccc;
	line-height:300px;
	text-align:center;
}

.dropzone.dragover{
	border-color:#000;
	color:#000;
}

申し訳ありませんがjqueryではなくjavascriptですが、私にとってはそれを解決する最も論理的な方法です。ブラウザは、（前の要素の）dropleaveを、（新しい要素の前に）dropenterの前に呼び出す必要があります。何かが何かに入ることができないため、最初のものを離れる必要があるため、なぜそうしたのか理解できません！そのようなドロップリーブ：

function mydropleave(e)
{
    e.preventDefault();
    e.stopPropagation();

    setTimeout(function(e){ //the things you want to do },1);
}

そして、dropenterはdropleaveの後に発生します、それだけです！

のgreedy : true関数として子にを使用しdroppableます。次に、最初のレイヤーでクリックされたイベントのみを開始します。