Dragleave HTML5 dipecat saat melayang elemen anak

Masalah yang saya alami adalah bahwa dragleaveperistiwa elemen dipecat ketika melayang elemen anak dari elemen itu. Juga, dragentertidak dipecat ketika melayang kembali elemen induk lagi.

Saya membuat biola yang disederhanakan: 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>

dengan JavaScript berikut:

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

Apa yang seharusnya dilakukan adalah memberi tahu pengguna dengan membuat drop divred saat menyeret sesuatu ke sana. Ini bekerja, tetapi jika Anda menyeret ke panak, dragleaveitu dipecat dan divtidak merah lagi. Kembali ke drop divjuga tidak membuatnya merah lagi. Sangat penting untuk keluar sepenuhnya dari drop divdan menyeret kembali ke dalamnya untuk membuatnya merah.

Apakah mungkin untuk mencegah dragleavemenembak ketika menyeret elemen anak?

Pembaruan 2017: TL; DR, Cari CSS pointer-events: none;seperti dijelaskan dalam jawaban @ HD di bawah ini yang berfungsi di browser modern dan IE11.

Anda hanya perlu menyimpan penghitung referensi, menambahkannya ketika Anda mendapatkan dragenter, mengurangi ketika Anda mendapatkan dragleave. Saat penghitung berada di 0 - hapus kelas.

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

Catatan: Dalam acara drop, setel ulang penghitung ke nol, dan hapus kelas yang ditambahkan.

Anda bisa menjalankannya di sini

Apakah mungkin untuk mencegah dragleave dari menembak ketika menyeret ke elemen anak?

Iya.

#drop * {pointer-events: none;}

CSS itu tampaknya cukup untuk Chrome.

Saat menggunakannya dengan Firefox, #drop seharusnya tidak memiliki node teks secara langsung (kalau tidak ada masalah aneh di mana elemen "biarkan sendiri" ), jadi saya sarankan untuk meninggalkannya hanya dengan satu elemen (misalnya, gunakan div di dalam #drop untuk memasukkan semuanya ke dalam)

Inilah jsfiddle yang memecahkan contoh pertanyaan asli (rusak) .

Saya juga telah membuat versi yang disederhanakan bercabang dari contoh @Theodore Brown, tetapi hanya didasarkan pada CSS ini.

Namun, tidak semua browser menerapkan CSS ini: http://caniuse.com/pointer-events

Melihat kode sumber Facebook saya bisa menemukan ini pointer-events: none;beberapa kali, namun mungkin digunakan bersama-sama dengan fallback degradasi anggun. Setidaknya itu sangat sederhana dan menyelesaikan masalah untuk banyak lingkungan.

Di sini, solusi Cross-Browser paling sederhana (serius):

jsfiddle <- coba seret beberapa file di dalam kotak

Anda dapat melakukan sesuatu seperti itu:

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

Dalam beberapa kata, Anda membuat "topeng" di dalam dropzone, dengan lebar & tinggi diwarisi, posisi absolut, yang hanya akan ditampilkan saat dragover dimulai.
Jadi, setelah menunjukkan topeng itu, Anda dapat melakukan trik dengan melampirkan yang lain dragleave & drop peristiwa di atasnya.

Setelah meninggalkan atau menjatuhkan, Anda hanya menyembunyikan topeng lagi.
Sederhana dan tanpa komplikasi.

(Obs .: Saran Greg Pettit - Anda harus yakin bahwa topeng mengarahkan seluruh kotak, termasuk perbatasan)

Sudah cukup lama setelah pertanyaan ini diajukan dan banyak solusi (termasuk hacks jelek) disediakan.

Saya berhasil memperbaiki masalah yang sama dengan yang baru-baru ini saya terima berkat jawaban dalam jawaban ini dan saya pikir mungkin bermanfaat bagi seseorang yang membuka halaman ini. Idenya adalah untuk menyimpan evenet.targetdi ondrageentersetiap kali dipanggil pada salah satu elemen orang tua atau anak. Kemudian ondragleaveperiksa apakah target saat ini ( event.target) sama dengan objek tempat Anda menyimpan ondragenter.

Satu-satunya kasus keduanya cocok adalah ketika tarik Anda meninggalkan jendela browser.

Alasan bahwa ini berfungsi dengan baik adalah ketika mouse meninggalkan elemen (katakanlah el1) dan memasuki elemen lain (katakanlah el2), pertama el2.ondragenterdisebut dan kemudian el1.ondragleave. Hanya ketika seret meninggalkan / memasuki jendela browser, event.targetakan berada ''di keduanya el2.ondragenter dan el1.ondragleave.

Ini sampel kerja saya. Saya telah mengujinya di IE9 +, Chrome, Firefox dan Safari.

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

Dan di sini adalah halaman html sederhana:

<!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>

Dengan gaya yang tepat yang telah saya lakukan adalah membuat div bagian dalam (# file-drop-area) jauh lebih besar setiap kali file diseret ke layar sehingga pengguna dapat dengan mudah menjatuhkan file ke tempat yang tepat.

Cara "benar" untuk menyelesaikan masalah ini adalah untuk menonaktifkan peristiwa pointer pada elemen turunan dari target yang dijatuhkan (seperti dalam jawaban @ HD). Inilah jsFiddle yang saya buat yang menunjukkan teknik ini . Sayangnya, ini tidak berfungsi dalam versi Internet Explorer sebelum IE11, karena mereka tidak mendukung peristiwa pointer .

Untungnya, saya bisa datang dengan solusi yang tidak bekerja di versi lama IE. Pada dasarnya, ini melibatkan mengidentifikasi dan mengabaikan dragleaveperistiwa yang terjadi ketika menyeret elemen anak. Karena dragenteracara dipecat pada simpul anak sebelum dragleaveacara pada induknya, pendengar peristiwa terpisah dapat ditambahkan ke setiap simpul anak yang menambah atau menghapus kelas "abaikan-seret-cuti" dari target yang dijatuhkan. Kemudian dragleavependengar acara target drop hanya dapat mengabaikan panggilan yang terjadi ketika kelas ini ada. Inilah jsFiddle yang menunjukkan solusi ini . Ini diuji dan bekerja di Chrome, Firefox, dan IE8 +.

Memperbarui:

Saya membuat jsFiddle mendemonstrasikan solusi gabungan menggunakan deteksi fitur, di mana peristiwa pointer digunakan jika didukung (saat ini Chrome, Firefox, dan IE11), dan browser kembali ke menambahkan acara ke node anak jika dukungan acara pointer tidak tersedia (IE8 -10).

Masalahnya adalah bahwa dragleaveperistiwa tersebut dipecat ketika mouse berjalan di depan elemen anak.

Saya sudah mencoba berbagai metode pemeriksaan untuk melihat apakah e.targetelemen itu sama dengan thiselemen, tetapi tidak bisa mendapatkan perbaikan.

Cara saya memperbaiki masalah ini sedikit meretas, tetapi bekerja 100%.

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

jika Anda menggunakan HTML5, Anda bisa mendapatkan clientRect induk:

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

Kemudian di parent.dragleave ():

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

ini jsfiddle

Solusi yang sangat sederhana adalah dengan menggunakan pointer-eventsproperti CSS . Cukup tetapkan nilainya ke noneatas dragstart pada setiap elemen anak. Elemen-elemen ini tidak akan memicu peristiwa yang berhubungan dengan mouse lagi, sehingga mereka tidak akan menangkap mouse di atasnya dan dengan demikian tidak akan memicu dragleave pada induknya.

Jangan lupa untuk mengatur properti ini kembali autosaat menyelesaikan drag;)

Solusi yang cukup sederhana ini bekerja untuk saya sejauh ini, dengan anggapan acara Anda melekat pada masing-masing elemen seret secara terpisah.

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

Solusi yang sangat sederhana:

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

Anda dapat memperbaikinya di Firefox dengan sedikit inspirasi dari kode sumber jQuery :

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

    if (related !== this) {

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

        if (!inside) {

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

}

Sayangnya itu tidak berfungsi di Chrome karena relatedTargettampaknya tidak ada pada dragleaveacara, dan saya menganggap Anda bekerja di Chrome karena contoh Anda tidak berfungsi di Firefox. Ini adalah versi dengan kode di atas diimplementasikan.

Dan ini dia, solusi untuk Chrome:

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

Berikut solusi lain menggunakan document.elementFromPoint:

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

Semoga ini berhasil, ini biola .

Solusi sederhana adalah menambahkan aturan css pointer-events: noneke komponen anak untuk mencegah pemicu ondragleave. Lihat contoh:

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>

Tidak yakin apakah ini lintas browser, tetapi saya menguji di Chrome dan itu memecahkan masalah saya:

Saya ingin menarik dan melepas file ke seluruh halaman, tetapi dragleave saya diaktifkan ketika saya menyeret elemen anak. Perbaikan saya adalah dengan melihat x dan y dari mouse:

saya memiliki div yang menutupi seluruh halaman saya, ketika halaman memuat saya menyembunyikannya.

ketika Anda seret dokumen saya tunjukkan, dan ketika Anda menjatuhkan orang tua itu menangani itu, dan ketika Anda meninggalkan orang tua saya periksa x dan y.

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

Saya telah menulis perpustakaan kecil bernama Dragster untuk menangani masalah ini, bekerja di mana-mana kecuali diam-diam tidak melakukan apa pun di IE (yang tidak mendukung DOM Event Constructor, tetapi akan sangat mudah untuk menulis sesuatu yang serupa menggunakan acara khusus jQuery)

Saya mengalami masalah yang sama dan mencoba menggunakan solusi pk7s. Ini berhasil tetapi bisa dilakukan sedikit lebih baik tanpa elemen dom tambahan.

Pada dasarnya idenya sama - tambahkan hamparan tak terlihat ekstra di atas area droppable. Hanya lakukan ini tanpa elemen dom tambahan. Inilah bagian yang elemen-elemen pseudo-CSS datang untuk dimainkan.

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

Aturan setelah ini akan membuat overlay yang tertutup sepenuhnya untuk area yang dapat dijatuhkan.

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

Inilah solusi lengkapnya: http://jsfiddle.net/F6GDq/8/

Saya harap ini membantu siapa pun dengan masalah yang sama.

Cukup periksa apakah elemen yang diseret adalah anak, jika ya, maka jangan hapus kelas gaya 'dragover' Anda. Cukup sederhana dan berfungsi untuk saya:

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

Saya telah menemukan masalah yang sama dan inilah solusi saya - yang saya pikir jauh lebih mudah daripada di atas. Saya tidak yakin apakah itu crossbrowser (mungkin bergantung pada urutan genap)

Saya akan menggunakan jQuery untuk kesederhanaan, tetapi solusi harus kerangka kerja yang independen.

Acara ini meletup ke orang tua dengan cara demikian:

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

Kami melampirkan acara

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

Dan itu saja. :) ini berfungsi karena meskipun onEnter on child fires sebelum onLeave on parent, kami menunda sedikit membalikkan urutan, sehingga kelas dihapus terlebih dahulu kemudian diterapkan kembali setelah satu milidetik.

Saya menulis modul drag-and-drop yang disebut drip-drop yang memperbaiki perilaku aneh ini, antara lain. Jika Anda mencari modul seret-dan-jatuhkan tingkat rendah yang baik yang dapat Anda gunakan sebagai dasar untuk apa saja (unggah file, seret-dan-lepas dalam aplikasi, seret dari atau ke sumber eksternal), Anda harus memeriksa ini modul keluar:

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

Ini adalah bagaimana Anda akan melakukan apa yang Anda coba lakukan di tetes-drop:

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

Untuk melakukan ini tanpa pustaka, teknik penghitung adalah apa yang saya gunakan dalam drip-drop, sehingga jawaban dengan nilai tertinggi melewatkan langkah-langkah penting yang akan menyebabkan hal-hal rusak untuk semuanya kecuali drop pertama. Inilah cara melakukannya dengan benar:

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

Solusi kerja alternatif, sedikit lebih sederhana.

//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) {

Setelah menghabiskan waktu berjam-jam, saya mendapat saran yang bekerja persis seperti yang dimaksudkan. Saya ingin memberikan isyarat hanya ketika file diseret, dan mendokumentasikan dragover, dragleave menyebabkan flicker yang menyakitkan di browser Chrome.

Ini adalah bagaimana saya menyelesaikannya, juga memberikan isyarat yang tepat bagi pengguna.

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

Saya memiliki masalah yang sama - kode saya untuk menyembunyikan dropzone pada acara dragleave untuk tubuh dipecat secara kontroversial ketika melayang-layang elemen anak yang membuat dropzone berkedip di Google Chrome.

Saya bisa menyelesaikan ini dengan menjadwalkan fungsi untuk menyembunyikan dropzone alih-alih memanggilnya segera. Kemudian, jika dragover atau dragleave lain dipecat, panggilan fungsi yang dijadwalkan dibatalkan.

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

" Dragleave " acara dipecat ketika pointer mouse keluar daerah menyeret wadah sasaran.

Yang membuat banyak akal karena dalam banyak kasus hanya orang tua yang mungkin droppable dan bukan keturunan. Saya pikir event.stopPropogation () seharusnya menangani kasus ini tetapi sepertinya tidak berhasil.

Di atas disebutkan beberapa solusi tampaknya bekerja untuk sebagian besar kasus, tetapi gagal dalam kasus anak-anak yang tidak mendukung acara dragenter / dragleave , seperti iframe .

1 solusinya adalah untuk memeriksa event.relatedTarget dan memverifikasi jika itu berada di dalam wadah kemudian abaikan acara dragleave seperti yang saya lakukan di sini:

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

Anda dapat menemukan biola yang berfungsi di sini !

Terpecahkan ..!

Deklarasikan sembarang array untuk contoh:

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

Tidak perlu khawatir tentang elemen anak.

Saya berjuang BANYAK dengan ini, bahkan setelah membaca semua jawaban ini, dan berpikir saya mungkin berbagi solusi dengan Anda, karena saya pikir itu mungkin salah satu pendekatan yang lebih sederhana, meskipun agak berbeda. Pikiranku hanya menghilangkan dragleavependengar acara sepenuhnya, dan mengkode perilaku dragleave dengan setiap acara dragenter baru dipecat, sambil memastikan bahwa acara dragenter tidak akan dipecat secara tidak perlu.

Dalam contoh saya di bawah ini, saya memiliki tabel, di mana saya ingin dapat bertukar konten baris tabel satu sama lain melalui drag & drop API. Pada dragenter, kelas CSS akan ditambahkan ke elemen baris di mana Anda saat ini menyeret elemen Anda, untuk menyorotnya, dan pada dragleave, kelas ini akan dihapus.

Contoh:

Tabel HTML yang sangat mendasar:

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

Dan fungsi dragenter event handler, ditambahkan ke setiap sel tabel (samping dragstart, dragover, drop, dan dragendpenangan, yang tidak spesifik untuk pertanyaan ini, sehingga tidak disalin di sini):

/*##############################################################################
##                              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;
  }
}

Komentar yang sangat mendasar ditinggalkan dalam kode, sehingga kode ini cocok untuk pemula juga. Semoga ini bisa membantu Anda! Perhatikan bahwa Anda tentu saja perlu menambahkan semua pendengar acara yang saya sebutkan di atas ke setiap sel tabel agar ini berfungsi.

Berikut ini adalah pendekatan lain berdasarkan waktu kejadian.

The dragenterevent dikirim dari elemen anak dapat ditangkap oleh elemen induk dan selalu terjadi sebelum dragleave. Pengaturan waktu antara kedua peristiwa ini benar-benar singkat, lebih pendek dari semua aksi mouse manusia yang mungkin. Jadi, idenya adalah untuk menghafal saat ketika dragenterterjadi dan menyaring dragleaveperistiwa yang terjadi "tidak terlalu cepat" setelah ...

Contoh singkat ini berfungsi di Chrome dan Firefox:

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 ..

Mengapa Anda tidak mencoba menggunakan drop daripada dragleave . Ini berhasil untuk saya. Semoga ini bisa menyelesaikan masalah Anda.

Silakan periksa jsFiddle: 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");
                 }
                });

Anda dapat menggunakan batas waktu dengan transitioningbendera dan mendengarkan elemen paling atas. dragenter/ dragleavedari acara anak-anak akan meluap ke wadah.

Karena dragenterpada elemen anak diaktifkan sebelum dragleavewadah, kami akan mengatur acara bendera sebagai transisi untuk 1 ms ... dragleavependengar akan memeriksa bendera sebelum 1 ms naik.

Bendera hanya akan benar selama transisi ke elemen anak, dan tidak akan benar ketika beralih ke elemen induk (dari wadah)

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/

Anda harus menghapus peristiwa pointer untuk semua objek anak dari target seret.

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) {
                //
            }
        }
    }