Bir alt öğeyi gezdirirken HTML5 sürükle ve bırak özelliği tetiklendi

Yaşadığım sorun dragleave, bir öğenin alt öğesini gezdirirken bir öğenin olayının başlatılmasıdır . Ayrıca, dragenterana eleman tekrar geri getirildiğinde tetiklenmez.

Basitleştirilmiş bir keman yaptım: 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>

aşağıdaki JavaScript ile:

$('#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");
                 }
                });

Yapması gereken divşey, orada bir şey sürüklerken damlayı kırmızı yaparak kullanıcıya bildirmektir . Bu işe yarar, ancak pçocuğa sürüklerseniz dragleave, işten çıkarılır ve divartık kırmızı olmaz. Damlaya geri dönmek divde onu tekrar kırmızı yapmaz. Damladan tamamen çıkmak divve kırmızı yapmak için tekrar içine sürüklemek gerekir.

dragleaveBir alt öğeye sürüklerken ateş etmeyi önlemek mümkün müdür ?

2017 Güncellemesi: TL; DR, CSS'yi pointer-events: none;modern tarayıcılarda ve IE11'de çalışan @ HD'nin cevabında açıklandığı gibi arayın.

Sadece bir referans sayacı tutmanız, bir dragenter aldığınızda artırmanız, bir dragleave aldığınızda azalmanız gerekir. Sayaç 0 olduğunda - sınıfı kaldırın.

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

Not: drop olayında sayacı sıfırlayın ve eklenen sınıfı temizleyin.

Burada çalıştırabilirsin

Bir alt öğeye sürüklerken sürükle yapraklarının ateşlenmesini önlemek mümkün müdür?

Evet.

#drop * {pointer-events: none;}

Bu CSS, Chrome için yeterli görünüyor.

Firefox ile kullanırken, #drop'un doğrudan metin düğümleri olmamalıdır (aksi takdirde bir öğenin "kendisine bıraktığı" garip bir sorun vardır ), bu yüzden sadece bir öğeyle bırakmanızı öneririm (örneğin, içinde bir div kullanın #drop her şeyi içine koymak)

İşte orijinal soru (kırık) örneğini çözen bir jsfiddle .

Ben de basitleştirilmiş bir versiyon yaptım @Theodore Brown örneğinden çatallanmış , ancak sadece bu CSS'ye dayanıyorum.

Bununla birlikte, tüm tarayıcılarda bu CSS uygulanmamıştır: http://caniuse.com/pointer-events

Facebook kaynak kodunu görünce bunu pointer-events: none;birkaç kez bulabilirdim , ancak muhtemelen zarif bozulma yedekleriyle birlikte kullanılır. En azından bu kadar basit ve birçok ortam için sorunu çözüyor.

Burada, en basit Çapraz Tarayıcı çözümü (ciddi olarak):

jsfiddle <- kutunun içinde bir dosya sürüklemeyi deneyin

Böyle bir şey yapabilirsiniz:

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

Birkaç kelimeyle, dropzone içinde, genişlik ve yükseklik devralınmış, mutlak konum ile bir ejderha maskesi oluşturursunuz.
Bu maskeyi gösterdikten sonra, diğer dragleave & drop olaylarını ekleyerek hile yapabilirsiniz.

Ayrıldıktan veya düştükten sonra maskeyi tekrar gizlersiniz.
Basit ve sorunsuz.

(Obs .: Greg Pettit tavsiyesi - Maskenin kenarlık da dahil olmak üzere tüm kutunun üzerine geldiğinden emin olmalısınız)

Bu soru sorulduktan sonra oldukça zaman geçti ve çok sayıda çözüm (çirkin hack'ler dahil) sağlandı.

Bu cevabın cevabı sayesinde son zamanlarda yaşadığım sorunu çözmeyi başardım ve bu sayfaya gelen birine yardımcı olabileceğini düşündüm. Bütün fikir saklamaktır evenet.targetiçinde ondrageenterebeveyn veya alt öğelerinden herhangi biri üzerinde her şey denir. Ardından ondragleave, geçerli hedefin ( event.target) içinde sakladığınız nesneye eşit olup olmadığını kontrol edinondragenter .

Bu ikisinin eşleştiği tek durum, sürüklemenizin tarayıcı penceresinden çıkmasıdır.

Bunun iyi çalışmasının nedeni, farenin bir öğeden ayrılması (diyelim el1) ve başka bir öğeye (diyelim ) girmesidir el2, önce el2.ondragenterdenir ve sonra el1.ondragleave. Yalnızca sürükleme tarayıcı penceresinden çıkarken / girerken, hem ve 'de event.targetolacaktır .''el2.ondragenterel1.ondragleave

İşte benim çalışma örneğim. IE9 +, Chrome, Firefox ve Safari'de test ettim.

(function() {
    var bodyEl = document.body;
    var flupDiv = document.getElementById('file-drop-area');

    flupDiv.onclick = function(event){
        console.log('HEy! some one clicked me!');
    };

    var enterTarget = null;

    document.ondragenter = function(event) {
        console.log('on drag enter: ' + event.target.id);
        enterTarget = event.target;
        event.stopPropagation();
        event.preventDefault();
        flupDiv.className = 'flup-drag-on-top';
        return false;
    };

    document.ondragleave = function(event) {
        console.log('on drag leave: currentTarget: ' + event.target.id + ', old target: ' + enterTarget.id);
        //Only if the two target are equal it means the drag has left the window
        if (enterTarget == event.target){
            event.stopPropagation();
            event.preventDefault();
            flupDiv.className = 'flup-no-drag';         
        }
    };
    document.ondrop = function(event) {
        console.log('on drop: ' + event.target.id);
        event.stopPropagation();
        event.preventDefault();
        flupDiv.className = 'flup-no-drag';
        return false;
    };
})();

İşte basit bir html sayfası:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple File Uploader</title>
<link rel="stylesheet" href="my.css" />
</head>
<body id="bodyDiv">
    <div id="cntnr" class="flup-container">
        <div id="file-drop-area" class="flup-no-drag">blah blah</div>
    </div>
    <script src="my.js"></script>
</body>
</html>

Düzgün şekillendirme ile yaptığım şey, bir dosya ekrana sürüklendiğinde iç div (# dosya bırakma alanı) çok daha büyük yapmaktır, böylece kullanıcı dosyaları uygun yere kolayca bırakabilir.

Bu sorunu çözmenin "doğru" yolu, bırakma hedefinin alt öğelerindeki işaretçi olaylarını devre dışı bırakmaktır (@ HD'nin yanıtında olduğu gibi). İşte bu tekniği gösteren bir jsFiddle . Ne yazık ki, bu işaretçi olaylarını desteklemedikleri için IE11'den önceki Internet Explorer sürümlerinde çalışmaz .

Neyse ki, geçici bir çözüm ile gelip başardı yapar IE eski sürümlerinde çalışması. Temel olarak, dragleavealt öğelerin üzerine sürüklerken meydana gelen olayların tanımlanmasını ve yoksayılmasını içerir . Çünkü dragenterolay öncesinde çocuk düğümler üzerinde ateşlenir dragleaveebeveyn üzerinde etkinliğe ayrı olay dinleyicileri eklemek veya bırakma hedeften bir "göz ardı-sürükle izni" sınıfını kaldırmak her çocuk düğüme eklenebilir. Ardından bırakma hedefinin dragleaveolay dinleyicisi, bu sınıf mevcut olduğunda gerçekleşen çağrıları yok sayabilir. İşte bu geçici çözümü gösteren bir jsFiddle . Chrome, Firefox ve IE8 + 'da test edilmiş ve çalışmaktadır.

Güncelleme:

Özellik algılamayı kullanarak birleşik bir çözüm gösteren bir jsFiddle oluşturdum , burada işaretçi olayları destekleniyorsa (şu anda Chrome, Firefox ve IE11) ve işaretçi olay desteği mevcut değilse tarayıcı alt düğümlere etkinlik eklemeye geri dönüyor (IE8 -10).

Sorun, dragleavefare alt öğenin önüne gittiğinde olayın başlatılmasıdır.

e.targetÖğenin öğe ile aynı olup olmadığını kontrol etmek için çeşitli yöntemler denedim this, ancak herhangi bir gelişme elde edemedim.

Bu sorunu çözme şeklim bir parça hackti, ama% 100 çalışıyor.

dragleave: function(e) {
               // Get the location on screen of the element.
               var rect = this.getBoundingClientRect();

               // Check the mouseEvent coordinates are outside of the rectangle
               if(e.x > rect.left + rect.width || e.x < rect.left
               || e.y > rect.top + rect.height || e.y < rect.top) {
                   $(this).removeClass('red');
               }
           }

HTML5 kullanıyorsanız, ebeveynin istemcisini alabilirsiniz

let rect = document.getElementById("drag").getBoundingClientRect();

Sonra parent.dragleave () içinde:

dragleave(e) {
    if(e.clientY < rect.top || e.clientY >= rect.bottom || e.clientX < rect.left || e.clientX >= rect.right) {
        //real leave
    }
}

işte bir jsfiddle

Çok basit bir çözüm pointer-eventsCSS özelliğini kullanmaktır . Sadece onun değerini noneüzerine DragStart her çocuk elemana. Bu öğeler artık fare ile ilgili olayları tetiklemeyecek, bu nedenle fareyi üzerlerinde yakalamayacak ve böylece sürükleme yapraklarını tetiklemeyecek üst üzerinde .

autoSürüklemeyi bitirirken bu özelliği tekrar ayarlamayı unutmayın ;)

Bu oldukça basit çözüm, etkinliğinizin her sürükleme öğesine ayrı ayrı eklendiğini varsayarak benim için şimdiye kadar çalışıyor.

if (evt.currentTarget.contains(evt.relatedTarget)) {
  return;
}

Çok basit bir çözüm:

parent.addEventListener('dragleave', function(evt) {
    if (!parent.contains(evt.relatedTarget)) {
        // Here it is only dragleave on the parent
    }
}

Firefox'ta jQuery kaynak kodundan biraz ilham alarak düzeltebilirsiniz :

dragleave: function(e) {
    var related = e.relatedTarget,
        inside = false;

    if (related !== this) {

        if (related) {
            inside = jQuery.contains(this, related);
        }

        if (!inside) {

            $(this).removeClass('red');
        }
    }

}

Maalesef Chrome'da çalışmıyor, çünkü etkinliklerde relatedTargetyok gibi görünüyor dragleaveve örneğin Firefox'ta çalışmadığı için Chrome'da çalıştığınızı varsayıyorum. Yukarıdaki kodun uygulandığı bir sürüm .

Ve işte gidiyor, Chrome için bir çözüm:

.bind('dragleave', function(event) {
                    var rect = this.getBoundingClientRect();
                    var getXY = function getCursorPosition(event) {
                        var x, y;

                        if (typeof event.clientX === 'undefined') {
                            // try touch screen
                            x = event.pageX + document.documentElement.scrollLeft;
                            y = event.pageY + document.documentElement.scrollTop;
                        } else {
                            x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                            y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                        }

                        return { x: x, y : y };
                    };

                    var e = getXY(event.originalEvent);

                    // Check the mouseEvent coordinates are outside of the rectangle
                    if (e.x > rect.left + rect.width - 1 || e.x < rect.left || e.y > rect.top + rect.height - 1 || e.y < rect.top) {
                        console.log('Drag is really out of area!');
                    }
                })

İşte document.elementFromPoint kullanan başka bir çözüm:

 dragleave: function(event) {
   var event = event.originalEvent || event;
   var newElement = document.elementFromPoint(event.pageX, event.pageY);
   if (!this.contains(newElement)) {
     $(this).removeClass('red');
   }
}

Umarım bu işe yarar , işte bir keman .

Basit bir çözüm, pointer-events: nonetetikleyiciyi önlemek için alt bileşene css kuralını eklemektir ondragleave. Örneğe bakın:

function enter(event) {
  document.querySelector('div').style.border = '1px dashed blue';
}

function leave(event) {
  document.querySelector('div').style.border = '';
}

div {
  border: 1px dashed silver;
  padding: 16px;
  margin: 8px;
}

article {
  border: 1px solid silver;
  padding: 8px;
  margin: 8px;
}

p {
  pointer-events: none;
  background: whitesmoke;
}

<article draggable="true">drag me</article>

<div ondragenter="enter(event)" ondragleave="leave(event)">
  drop here
  <p>child not triggering dragleave</p>
</div>

Bu çapraz tarayıcının olup olmadığından emin değilim, ancak Chrome'da test ettim ve sorunumu çözdü:

Bir dosyayı tüm sayfanın üzerine sürükleyip bırakmak istiyorum, ancak alt öğenin üzerine sürüklediğimde sürükleme yaprakım tetikleniyor. Benim düzeltme farenin x ve y bakmak oldu:

tüm sayfa bindirmeleri bir div var, sayfa yüklendiğinde ben gizlemek.

belgenin üzerine sürüklediğinizde bunu gösteririm ve üst öğeye bıraktığınızda işlenir ve üst öğeden ayrıldığınızda x ve y'yi kontrol ederim.

$('#draganddrop-wrapper').hide();

$(document).bind('dragenter', function(event) {
    $('#draganddrop-wrapper').fadeIn(500);
    return false;
});

$("#draganddrop-wrapper").bind('dragover', function(event) {
    return false;
}).bind('dragleave', function(event) {
    if( window.event.pageX == 0 || window.event.pageY == 0 ) {
        $(this).fadeOut(500);
        return false;
    }
}).bind('drop', function(event) {
    handleDrop(event);

    $(this).fadeOut(500);
    return false;
});

Bu sorunu çözmek için Dragster adlı küçük bir kütüphane yazdım , IE'de hiçbir şey yapmadan (DOM Etkinlik Oluşturucularını desteklemiyor, ancak jQuery'nin özel etkinliklerini kullanarak benzer bir şey yazmak oldukça kolay olurdu) dışında her yerde çalışıyor

Aynı sorunu yaşıyordum ve pk7s çözümünü kullanmaya çalıştım. İşe yaradı, ancak ekstra dom öğeleri olmadan biraz daha iyi yapılabilirdi.

Temel olarak fikir aynı - düşebilir alana ekstra görünmez bir kaplama ekleyin. Bunu sadece ekstra dom öğeleri olmadan yapalım. İşte bölüm CSS sözde elemanlar oynamaya geliyordu.

JavaScript

var dragOver = function (e) {
    e.preventDefault();
    this.classList.add('overlay');
};

var dragLeave = function (e) {
    this.classList.remove('overlay');
};


var dragDrop = function (e) {
    this.classList.remove('overlay');
    window.alert('Dropped');
};

var dropArea = document.getElementById('box');

dropArea.addEventListener('dragover', dragOver, false);
dropArea.addEventListener('dragleave', dragLeave, false);
dropArea.addEventListener('drop', dragDrop, false);

CSS

Bu kuraldan sonra, bırakılabilir alan için tamamen kaplanmış bir kaplama oluşturulur.

#box.overlay:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

İşte tam çözüm: http://jsfiddle.net/F6GDq/8/

Umarım aynı problemi olan herkese yardımcı olur.

Sürüklenen öğenin alt öğe olup olmadığını kontrol edin, eğer öyleyse 'dragover' stil sınıfınızı kaldırmayın. Oldukça basit ve benim için çalışıyor:

 $yourElement.on('dragleave dragend drop', function(e) {
      if(!$yourElement.has(e.target).length){
           $yourElement.removeClass('is-dragover');
      }
  })

Aynı soruna rastladım ve işte benim çözümüm - ki bence yukarıda olduğundan çok daha kolay. Crossbrowser olup olmadığından emin değilim (köpürme düzenine bile bağlı olabilir)

Basitlik için jQuery kullanacağım, ancak çözüm çerçeveden bağımsız olmalıdır.

Olay, şu şekilde verildiğinde her iki şekilde de ebeveynlere gönderilir:

<div class="parent">Parent <span>Child</span></div>

Etkinlik ekliyoruz

el = $('.parent')
setHover = function(){ el.addClass('hovered') }
onEnter  = function(){ setTimeout(setHover, 1) }
onLeave  = function(){ el.removeClass('hovered') } 
$('.parent').bind('dragenter', onEnter).bind('dragleave', onLeave)

Ve bununla ilgili. :) çalışır çünkü onEnter önce çocuk yangınlarına rağmen onLeave ebeveyn üzerinde, biz biraz ters gecikme sipariş, böylece sınıf ilk önce kaldırılır sonra milisaniye sonra tekrar.

Bu tuhaf davranışı düzelten damla damla adlı bir sürükle bırak modülü yazdım . Herhangi bir şeyin temeli olarak kullanabileceğiniz iyi bir düşük düzey sürükle ve bırak modülü arıyorsanız (dosya yükleme, uygulama içi sürükle ve bırak, dış kaynaklardan veya dış kaynaklara sürükleme) bunu kontrol etmelisiniz. modül çıkışı:

https://github.com/fresheneesz/drip-drop

Damla damla ile yapmaya çalıştığınız şey şu şekilde olurdu:

$('#drop').each(function(node) {
  dripDrop.drop(node, {
    enter: function() {
      $(node).addClass('red')  
    },
    leave: function() {
      $(node).removeClass('red')
    }
  })
})
$('#drag').each(function(node) {
  dripDrop.drag(node, {
    start: function(setData) {
      setData("text", "test") // if you're gonna do text, just do 'text' so its compatible with IE's awful and restrictive API
      return "copy"
    },
    leave: function() {
      $(node).removeClass('red')
    }
  })
})

Bunu bir kütüphane olmadan yapmak için, sayaç tekniği damla damlada kullandığım şeydir, en yüksek puanlı cevap ilk damla hariç her şey için her şeyin kırılmasına neden olacak önemli adımları kaçırır. Düzgün nasıl yapılacağı aşağıda açıklanmıştır:

var counter = 0;    
$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault()
        counter++
        if(counter === 1) {
          $(this).addClass('red')
        }
    },

    dragleave: function() {
        counter--
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    },
    drop: function() {
        counter = 0 // reset because a dragleave won't happen in this case
    }
});

Alternatif bir çalışma çözümü, biraz daha basit.

//Note: Due to a bug with Chrome the 'dragleave' event is fired when hovering the dropzone, then
//      we must check the mouse coordinates to be sure that the event was fired only when 
//      leaving the window.
//Facts:
//  - [Firefox/IE] e.originalEvent.clientX < 0 when the mouse is outside the window
//  - [Firefox/IE] e.originalEvent.clientY < 0 when the mouse is outside the window
//  - [Chrome/Opera] e.originalEvent.clientX == 0 when the mouse is outside the window
//  - [Chrome/Opera] e.originalEvent.clientY == 0 when the mouse is outside the window
//  - [Opera(12.14)] e.originalEvent.clientX and e.originalEvent.clientY never get
//                   zeroed if the mouse leaves the windows too quickly.
if (e.originalEvent.clientX <= 0 || e.originalEvent.clientY <= 0) {

Çok fazla saat geçirdikten sonra bu öneriyi tam olarak planlandığı gibi çalıştırabildim. Sadece dosyalar sürüklendiğinde bir ipucu vermek istedim ve belge dragover, dragleave Chrome tarayıcısında acı verici titremelere neden oluyordu.

Bu şekilde çözdüm, ayrıca kullanıcı için uygun ipuçlarını atıyorum.

$(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
});

Benzer bir sorunum vardı - gövde için dragleave olayında dropzone gizleme kodum, Google Chrome'da dropzone titremesi yapan alt öğelerin üzerine geldiğinde sıkı bir şekilde tetiklendi.

Bunu hemen çağırmak yerine dropzone'u gizleme işlevini zamanlayarak çözebildim. Ardından, başka bir ejderha ya da dragleave tetiklenirse, programlanan işlev çağrısı iptal edilir.

body.addEventListener('dragover', function() {
    clearTimeout(body_dragleave_timeout);
    show_dropzone();
}, false);

body.addEventListener('dragleave', function() {
    clearTimeout(body_dragleave_timeout);
    body_dragleave_timeout = setTimeout(show_upload_form, 100);
}, false);

dropzone.addEventListener('dragover', function(event) {
    event.preventDefault();
    dropzone.addClass("hover");
}, false);

dropzone.addEventListener('dragleave', function(event) {
    dropzone.removeClass("hover");
}, false);

Fare işaretçisi hedef kabın sürükleme alanından çıktığında " dragleave " olayı tetiklenir.

Hangi sadece ebeveyn olabilir birçok durumda olduğu gibi mantıklı bir çok yapar droppable torunları değil. Event.stopPropogation () düşünüyorum bu davayı ele gerekirdi ama hile yapmaz gibi görünüyor.

Yukarıda belirtilen bazı çözümler çoğu durumda işe yarıyor gibi görünmektedir, ancak iframe gibi dragenter / dragleave olaylarını desteklemeyen çocuklar için başarısız olur .

1 geçici çözümü event.relatedTarget öğesini kontrol etmek ve kabın içinde olup olmadığını doğrulamak ve sonra burada yaptığım gibi dragleave olayını yok saymaktır :

function isAncestor(node, target) {
    if (node === target) return false;
    while(node.parentNode) {
        if (node.parentNode === target)
            return true;
        node=node.parentNode;
    }
    return false;
}

var container = document.getElementById("dropbox");
container.addEventListener("dragenter", function() {
    container.classList.add("dragging");
});

container.addEventListener("dragleave", function(e) {
    if (!isAncestor(e.relatedTarget, container))
        container.classList.remove("dragging");
});

Burada çalışan bir keman bulabilirsiniz !

Çözüldü ..!

Ex için herhangi bir dizi bildirin:

targetCollection : any[] 

dragenter: function(e) {
    this.targetCollection.push(e.target); // For each dragEnter we are adding the target to targetCollection 
    $(this).addClass('red');
},

dragleave: function() {
    this.targetCollection.pop(); // For every dragLeave we will pop the previous target from targetCollection
    if(this.targetCollection.length == 0) // When the collection will get empty we will remove class red
    $(this).removeClass('red');
}

Çocuk unsurları hakkında endişelenmenize gerek yok.

Tüm bu cevapları okuduktan sonra bile bununla çok uğraştım ve çözümümü sizinle paylaşabileceğimi düşündüm, çünkü bunun biraz daha basit yaklaşımlardan biri olabileceğini düşündüm. Benim düşüncem, dragleaveolay dinleyicisini tamamen atlamak ve sürülen her yeni dragenter olayı ile dragleave davranışını kodlamak ve dragenter olaylarının gereksiz yere tetiklenmemesini sağlamaktı.

Aşağıdaki örneğimde, sürükleyip bırakma API'si aracılığıyla tablo satırı içeriğini birbiriyle değiştirebilmek istediğim bir tablo var. Açık olarak dragenter, o anda öğenizi sürüklediğiniz satır öğesini bir CSS sınıfı eklenecek, vurgulanacak vedragleave bu sınıf kaldırılacaktır.

Misal:

Çok temel HTML tablosu:

<table>
  <tr>
    <td draggable="true" class="table-cell">Hello</td>
  </tr>
  <tr>
    <td draggable="true" clas="table-cell">There</td>
  </tr>
</table>

Ve her bir tablo hücresinin üzerine eklenen dragenter olay işleyicisi işlevi, (kenara dragstart, dragover, dropve dragendbu soruya özgü olmayan yükleyiciler, yani burada kopyalanan değil):

/*##############################################################################
##                              Dragenter Handler                             ##
##############################################################################*/

// When dragging over the text node of a table cell (the text in a table cell),
// while previously being over the table cell element, the dragleave event gets
// fired, which stops the highlighting of the currently dragged cell. To avoid
// this problem and any coding around to fight it, everything has been
// programmed with the dragenter event handler only; no more dragleave needed

// For the dragenter event, e.target corresponds to the element into which the
// drag enters. This fact has been used to program the code as follows:

var previousRow = null;

function handleDragEnter(e) {
  // Assure that dragenter code is only executed when entering an element (and
  // for example not when entering a text node)
  if (e.target.nodeType === 1) {
    // Get the currently entered row
    let currentRow = this.closest('tr');
    // Check if the currently entered row is different from the row entered via
    // the last drag
    if (previousRow !== null) {
      if (currentRow !== previousRow) {
        // If so, remove the class responsible for highlighting it via CSS from
        // it
        previousRow.className = "";
      }
    }
    // Each time an HTML element is entered, add the class responsible for
    // highlighting it via CSS onto its containing row (or onto itself, if row)
    currentRow.className = "ready-for-drop";
    // To know which row has been the last one entered when this function will
    // be called again, assign the previousRow variable of the global scope onto
    // the currentRow from this function run
    previousRow = currentRow;
  }
}

Kodda çok temel yorumlar bırakıldı, böylece bu kod yeni başlayanlar için de uygun. Bu size yardımcı olacağını umuyoruz! Elbette bunun için yukarıda bahsettiğim tüm olay dinleyicilerini her tablo hücresine eklemeniz gerekeceğini unutmayın.

İşte olayların zamanlamasına dayanan başka bir yaklaşım.

Alt dragenteröğeden gönderilen olay, üst öğe tarafından yakalanabilir ve her zaman. Öğesinden önce gerçekleşir dragleave. Bu iki olay arasındaki zamanlama, gerçekten olası herhangi bir insan fare hareketinden daha kısadır. Buradaki fikir, gerçekleşen zamanı ezberlemek ve sonrasında "çok hızlı değil" gerçekleşen olayları dragenterfiltrelemek dragleave...

Bu kısa örnek Chrome ve Firefox'ta çalışır:

var node = document.getElementById('someNodeId'),
    on   = function(elem, evt, fn) { elem.addEventListener(evt, fn, false) },
    time = 0;

on(node, 'dragenter', function(e) {
    e.preventDefault();
    time = (new Date).getTime();
    // Drag start
})

on(node, 'dragleave', function(e) {
    e.preventDefault();
    if ((new Date).getTime() - time > 5) {
         // Drag end
    }
})

pimvdb ..

Neden dragleave yerine drop kullanmayı denemiyorsun ? Benim için çalıştı. Umarız bu sorununuzu çözer.

Lütfen jsFiddle'ı kontrol edin: http://jsfiddle.net/HU6Mk/118/

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

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

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

transitioningBayrağı olan bir zaman aşımı kullanabilir ve üst öğeyi dinleyebilirsiniz. dragenter/ dragleaveçocuk olaylarından konteyner kadar kabarcık olacak.

Yana dragenterönce alt öğe yangınlarla ilgili dragleavekabın biz 1ms için geçiş olarak bayrak gösterisi ayarlayacaktır ... dragleave1ms önce bayrak kontrol edecektir dinleyici kalmıştır.

Bayrak yalnızca alt öğelere geçişler sırasında doğru olur ve bir üst öğeye (kabın) geçiş yaparken doğru olmaz

var $el = $('#drop-container'),
    transitioning = false;

$el.on('dragenter', function(e) {

  // temporarily set the transitioning flag for 1 ms
  transitioning = true;
  setTimeout(function() {
    transitioning = false;
  }, 1);

  $el.toggleClass('dragging', true);

  e.preventDefault();
  e.stopPropagation();
});

// dragleave fires immediately after dragenter, before 1ms timeout
$el.on('dragleave', function(e) {

  // check for transitioning flag to determine if were transitioning to a child element
  // if not transitioning, we are leaving the container element
  if (transitioning === false) {
    $el.toggleClass('dragging', false);
  }

  e.preventDefault();
  e.stopPropagation();
});

// to allow drop event listener to work
$el.on('dragover', function(e) {
  e.preventDefault();
  e.stopPropagation();
});

$el.on('drop', function(e) {
  alert("drop!");
});

jsfiddle: http://jsfiddle.net/ilovett/U7mJj/

Sürükleme hedefinin tüm alt nesneleri için işaretçi olaylarını kaldırmanız gerekir.

function disableChildPointerEvents(targetObj) {
        var cList = parentObj.childNodes
        for (i = 0; i < cList.length; ++i) {
            try{
                cList[i].style.pointerEvents = 'none'
                if (cList[i].hasChildNodes()) disableChildPointerEvents(cList[i])
            } catch (err) {
                //
            }
        }
    }