子要素の上にドラッグすると、親要素の「dragleave」が発生します
概要
次の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">などの子要素の上にマウスを移動すると、<div id="drag-n-drop">要素に対してdragenterイベントが発生し、<div id="dropzone">要素に対してdragleaveイベントが発生します。
<div id="dropzone">要素に再度カーソルを合わせると、dragenterイベントが再び発生しますが、これはクールですが、その後、左の子要素に対してdragleaveイベントが発生するため、removeClass命令が実行されます。
この動作には2つの理由で問題があります。
dragenterとdragleaveのみを<div id="dropzone">にアタッチしているので、子要素にもこれらのイベントがアタッチされている理由がわかりません。私はまだ
<div id="dropzone">要素の上でその子の上をホバリングしながらドラッグしていますので、dragleaveを起動させたくありません！
jsFiddle
ここにjsFiddleをいじくり回します： http://jsfiddle.net/yYF3S/2/
質問
だから... <div id="dropzone">要素の上にファイルをドラッグしているときに、子要素の上にドラッグしてもdragleaveが起動しないようにするにはどうすればよいですか... <div id="dropzone">要素をそのままにします...要素の境界内のどこかにホバー/ドラッグするとしないがdragleaveイベントをトリガーします。
少なくともHTML5のドラッグアンドドロップをサポートするブラウザでは、これがクロスブラウザ互換である必要があるため、 this answer は適切ではありません。
GoogleとDropboxはこれを理解しているように見えますが、それらのソースコードは縮小/複雑化されているため、実装からこれを理解することができませんでした。
私はついに私が満足している解決策を見つけました。実際にいくつかの方法を見つけましたが、現在のソリューションほど成功していません... 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を2回呼び出すため、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はまだテストしていません）。
イベントを子要素にバインドする必要がない場合は、常にpointer-eventsプロパティを使用できます。
.child-elements {
pointer-events: none;
}
これは少しいですが、動作します！...
「dragenter」ハンドラーにevent.targetを（クロージャー内の変数などに）格納し、「dragleave」ハンドラーにevent.target ===が格納されている場合にのみコードを起動します。
「dragenter」が必要ないときに発動する場合（つまり、子要素を離れた後に入るとき）、マウスが親を離れる前に最後に発動するとき、それは親の上にあるため、親は常に意図した「dragleave」の前の最後の「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アプローチを捨てる人々に同意しました。しかし、それから私は自分自身に尋ねました：
子要素を操作するためにポインターイベントが本当に必要ですかドラッグの進行中？
私の場合、私は子供たちにたくさんのことをさせています。追加のアクション、インライン編集などのボタンを表示するには、ホバーします。ただし、noneのいずれかが必要であるか、実際には望ましいduringドラッグです。
私の場合、次のようなものを使用して、親コンテナーのすべての子ノードのポインターイベントを選択的にオフにします。
div.drag-target-parent-container.dragging-in-progress * {
pointer-events: none;
}
dragEnterなどで行ったように、dragLeave/dragStartイベントハンドラーでdragging-in-progressクラスを追加/削除するには、お好みの方法を使用します。等.
これは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
本当に素晴らしいです。
真のdragleave機能を処理するために作成された特別なイベント。
HTML5 dragleaveイベントは、マウスアウトのように機能します。このプラグインは、ドラッグ中にmouseleaveスタイルの機能を複製するために作成されました。
使用例：
$（ '＃myelement'）。on（ 'dragout'、function（event）{//あなたのコード}）;
編集：実際には、jQueryに依存しているとは思いません。おそらく、コードがなくてもコードを使用できます。
@hristoはるかにエレガントなソリューションがあります。それが使用できるものであるかどうかを確認してください。
結局、あなたの努力は無駄になりませんでした。最初は何とか使用できましたが、Chrome FFではさまざまな問題がありました。非常に多くの時間を費やした後、私はその提案が意図したとおりに機能するようになりました。
実装方法は次のとおりです。また、視覚的なキューを利用して、ドロップゾーンについてユーザーを正しくガイドしました。
$(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セント：ドロップゾーン上でレイヤーを非表示にしてから、ドラッグエンター時にレイヤーを表示し、ドラッグリーブをターゲットにします。
デモ： 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;
});
私のバージョン：
$(".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>
dragoverイベントとdragleaveイベントの両方に対して、e.target、e.currentTarget、e.relatedTargetの要素クラスのダンプを作成しました。
親ブロック（.dropzone）を離れると、e.relatedTargetはこのブロックの子ではないため、ドロップゾーンから抜け出していることがわかりました。
これに対する非常に簡単なクイックフィックスです。広範囲にテストされていませんが、現在Chromeで機能しています。
Coffeescriptを失礼します。
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のちらつきのバグ、または少なくとも問題の原因となったその順列のバグが修正されます。
だから、私にとってアプローチpointer-events: none;はうまく機能しなかった...だからここに私の代替ソリューションがあります：
#dropzone {
position: relative;
}
#dropzone(.active)::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
}
この方法では、dragleaveを親（子）またはdragover子要素にすることはできません。お役に立てれば ：）
* dragenterまたはdragleaveのときに追加する「.active」クラス。ただし、それなしで作業している場合は、クラスを離れてください。
ユーザーがファイルをスペースにドラッグしたときにボックスの色が変わるファイルアップロードボックスに、これを自分で実装しようとしていました。
JavascriptとCSSをうまく組み合わせたソリューションを見つけました。 ID #dropのdivのドロップ可能なゾーンがあるとします。これをJavascriptに追加します。
$('#drop').on('dragenter', function() {
$(this).addClass('dragover');
$(this).children().addClass('inactive');
});
$('#drop').on('dragleave', function() {
$(this).removeClass('dragover');
$(this).children().removeClass('inactive');
});
次に、これをCSSに追加して、すべての子を.inactiveクラスに非アクティブ化します：
#drop *.inactive {
pointer-events: none;
}
したがって、ユーザーが要素をボックス上にドラッグしている限り、子要素は非アクティブになります。
私は同様の問題を抱えていて、このように修正しました：
問題：ユーザーが「ドロップゾーン」（ul要素）に要素をドロップすると、関数drop（ev）が起動しますが、残念なことに、要素がその子（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));}
}
この答えはここにあります：
子要素をホバーするときに発生する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');
}
}
});
実際に私は https://github.com/lolmaus/jquery.dragbetter/ で見ているものが好きですが、可能な代替案を共有したかったのです。私の一般的な戦略は、ドロップゾーンまたはその任意の子を（バブルを介して）ドラッグするときに、ドロップゾーン（子ではない）に背景スタイルを適用することでした。次に、ドロップゾーンをドラッグリーブするときにスタイルを削除します。アイデアは、子に移動するときに、ドロップゾーンからスタイルを削除するときに（ドラッグリーブが発生する）、子をドラッグするときに親ドロップゾーンにスタイルを再適用するだけでした。もちろん、問題は、ドロップゾーンからドロップゾーンの子に移動するとき、ドラッグリーバーがドラッグリーブの前に子で起動されるため、スタイルが順不同で適用されることです。私にとっての解決策は、タイマーを使用してdragenterイベントを強制的にメッセージキューに戻し、dragleave後に処理できるようにすることでした。クロージャーを使用して、タイマーコールバックのイベントにアクセスしました。
$('.dropzone').on('dragenter', function(event) {
(function (event) {
setTimeout(function () {
$(event.target).closest('.dropzone').addClass('highlight');
}, 0);
}) (event.originalEvent);
});
これはChrome、つまりFirefoxで動作するようで、ドロップゾーン内の子の数に関係なく動作します。イベントの順序変更を保証するタイムアウトについては少し不安ですが、ユースケースではかなりうまくいくようです。
私は子供の要素に対するコントロールを失いたくないので、ここに提示された回避策のいずれにも満足していませんでした。
そこで、別のロジックアプローチを使用して、 jquery-draghandler というjQueryプラグインに変換しました。 DOMを操作することは絶対になく、高いパフォーマンスが保証されます。その使い方は簡単です：
$(document).ready(function() {
$(selector).draghandler({
onDragEnter: function() {
// $(this).doSomething();
},
onDragLeave: function() {
// $(this).doSomethingElse();
}
});
});
DOM機能を損なうことなく問題を完璧に処理します。
Gitリポジトリ のダウンロード、詳細、説明。
ここでは、最も簡単な解決策の1つです。
これを見てください fiddle <-ボックス内にファイルをドラッグしてみてください
次のようなことができます：
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);
それによって、ここで何が起こっているかをすでに知っているはずです。
フィドルをご覧ください。
私はこれを自分で実装しようとしていましたが、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;
}