'dragleave' elemen induk diaktifkan saat menyeret elemen anak-anak

Gambaran

Saya memiliki struktur HTML berikut dan saya telah melampirkan dragenterdan dragleaveacara ke <div id="dropzone">elemen.

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

Masalah

Ketika saya menyeret file ke atas <div id="dropzone">, dragenteracara tersebut diaktifkan seperti yang diharapkan. Namun, ketika saya memindahkan mouse saya ke elemen anak, seperti <div id="drag-n-drop">, dragenteracara dipecat untuk <div id="drag-n-drop">elemen dan kemudian dragleaveacara dipecat untuk<div id="dropzone"> elemen.

Jika saya mengarahkan <div id="dropzone">elemen lagi, dragenteracara kembali dipecat, yang keren, tapi kemudian dragleaveacara dipecat untuk elemen anak yang baru saja pergi, jadiremoveClass instruksi dijalankan, yang tidak keren.

Perilaku ini bermasalah karena 2 alasan:

1. Saya hanya melampirkan dragenter& dragleaveke <div id="dropzone">jadi saya tidak mengerti mengapa elemen anak-anak memiliki acara ini juga terpasang.

2. Saya masih menyeret <div id="dropzone">elemen sambil melayang-layang di atas anak-anaknya jadi saya tidak ingin dragleavemenembak!

jsFiddle

Berikut adalah jsFiddle untuk bermain-main dengan: http://jsfiddle.net/yYF3S/2/

Pertanyaan

Jadi ... bagaimana saya bisa membuatnya sehingga ketika saya menyeret file di atas <div id="dropzone">elemen, dragleavetidak memecat bahkan jika saya menyeret elemen anak-anak ... itu hanya akan menyala ketika saya meninggalkan <div id="dropzone">elemen .. melayang-layang / menyeret di mana saja dalam batas-batas elemen tidak boleh memicu dragleaveacara.

Saya ingin ini kompatibel lintas-browser, setidaknya di browser yang mendukung HTML5 drag-n-drop, jadi jawaban ini ini tidak memadai.

Sepertinya Google dan Dropbox sudah menemukan ini, tetapi kode sumber mereka diperkecil / rumit jadi saya belum bisa mengetahuinya dari penerapannya.

Jika Anda tidak perlu mengikat acara ke elemen turunan, Anda selalu dapat menggunakan properti pointer-events.

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

Saya akhirnya menemukan solusi yang saya sukai. Saya benar-benar menemukan beberapa cara untuk melakukan apa yang saya inginkan tetapi tidak ada yang sesukses solusi saat ini ... dalam satu solusi, saya sering mengalami kerlipan sebagai akibat dari menambah / menghapus batas ke#dropzone elemen ... di lain, perbatasan tidak pernah dihapus jika Anda menjauh dari browser.

Bagaimanapun, solusi hacky terbaik saya adalah ini:

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

Ini bekerja cukup baik tetapi masalah muncul di Firefox karena Firefox adalah permintaan ganda dragenter sehingga counter saya tidak aktif. Namun demikian, ini bukan solusi yang sangat elegan.

Lalu saya menemukan pertanyaan ini: Bagaimana mendeteksi acara dragleave di Firefox ketika menyeret keluar jendela

Jadi saya mengambil jawabannya dan menerapkannya pada situasi saya:

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

Ini bersih dan elegan dan tampaknya berfungsi di setiap browser yang saya uji sejauh ini (belum menguji IE).

Ini sedikit jelek tapi berhasil, sial! ...

Pada penangan 'dragenter' Anda simpan event.target (dalam variabel di dalam penutupan Anda, atau apa pun), maka di penangan 'dragleave' Anda hanya memecat kode Anda jika event.target === yang Anda simpan.

Jika 'dragenter' Anda menembak ketika Anda tidak menginginkannya (yaitu ketika ia masuk setelah meninggalkan elemen anak), maka terakhir kali ia menyala sebelum mouse meninggalkan induk, itu pada induknya, sehingga induknya akan selalu 'dragenter' terakhir sebelum 'dragleave' yang dimaksud.

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

}());

Pada awalnya, saya setuju dengan orang-orang yang mengabaikan pointer-events: nonependekatan itu. Tapi kemudian saya bertanya pada diri sendiri:

Apakah Anda benar-benar membutuhkan pointer-event untuk bekerja pada elemen anak saat menyeret sedang berlangsung ?

Dalam kasus saya, saya memiliki banyak hal yang terjadi pada anak-anak, misalnya mengarahkan untuk menunjukkan tombol untuk tindakan tambahan, mengedit inline, dll ... Namun, tidak ada yang diperlukan atau bahkan bahkan diinginkan selama drag.

Dalam kasus saya, saya menggunakan sesuatu seperti ini untuk mematikan peristiwa pointer secara selektif untuk semua node anak dari wadah induk:

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

Gunakan pendekatan favorit Anda untuk menambah / menghapus kelas dragging-in-progressdi dragEnter/ dragLeaveevent handler, seperti yang saya lakukan atau lakukan hal yang sama dragStart, et. Al.

Ini sepertinya merupakan bug Chrome.

Satu-satunya solusi yang dapat saya pikirkan adalah membuat elemen overlay transparan untuk menangkap acara Anda: 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>
​

Masalahnya adalah, bahwa elemen Anda di dalam zona drop tentu saja merupakan bagian dari zona drop dan ketika Anda memasukkan anak-anak, Anda meninggalkan orang tua. Memecahkan ini tidak mudah. Anda dapat mencoba menambahkan acara ke anak-anak juga menambahkan kelas Anda lagi ke orang tua.

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

    // add a class to #dropzone

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

Acara Anda masih akan berulang kali tetapi tidak ada yang melihat.

// Edit: Gunakan acara dragmove untuk secara permanen menimpa acara dragleave:

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

    // add a class to #dropzone

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

Tetapkan acara dragleave hanya untuk dropzone.

Seperti benr disebutkan dalam jawaban ini , Anda dapat mencegah node anak untuk api pada peristiwa, tetapi jika Anda perlu untuk mengikat beberapa peristiwa, lakukan ini:

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

Dan tambahkan yang ini ke kode JS Anda:

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

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

Jika Anda menggunakan jQuery, lihat ini: https://github.com/dancork/jquery.event.dragout

Sungguh luar biasa.

Acara khusus dibuat untuk menangani fungsionalitas dragleave yang sebenarnya.

Acara dragleave HTML5 lebih berfungsi seperti mouseout. Plugin ini dibuat untuk mereplikasi fungsionalitas gaya mouseleave sambil menyeret.

Contoh Penggunaan:

$ ('# myelement'). on ('dragout', function (event) {// YOUR CODE});

EDIT: sebenarnya, saya tidak berpikir itu tergantung pada jQuery, Anda mungkin bisa menggunakan kode bahkan tanpa itu.

@ hristo Saya punya solusi yang jauh lebih elegan. Periksa apakah itu sesuatu yang bisa Anda gunakan.

Usaha Anda tidak sia-sia. Saya berhasil menggunakan Anda pada awalnya, tetapi memiliki masalah berbeda di FF, Chrome. Setelah menghabiskan waktu berjam-jam, saya mendapat saran yang bekerja persis seperti yang dimaksudkan.

Begini cara implementasinya. Saya juga memanfaatkan isyarat visual untuk memandu pengguna dengan benar tentang zona penurunan.

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

Dua sen saya: Sembunyikan lapisan di atas dropzone Anda lalu perlihatkan ketika Anda menyeret, dan targetkan dragleave di atasnya.

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

Jadi bagi saya pendekatannya pointer-events: none;tidak bekerja dengan baik ... Jadi, inilah solusi alternatif saya:

    #dropzone {
        position: relative;
    }

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

Dengan cara ini tidak mungkin untuk dragleaveorang tua (pada anak) atau dragoverelemen anak. semoga ini membantu :)

* Kelas '.active' yang saya tambahkan saat saya dragenteratau dragleave. Tetapi jika Anda bekerja tanpa itu tinggalkan saja kelas.

Perbaikan cepat super sederhana untuk ini, tidak diuji secara luas tetapi berfungsi di Chrome sekarang.

Maafkan 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

Ini memperbaiki bug flicker Chrome, atau setidaknya permutasi yang menyebabkan saya bermasalah.

Jawaban ini dapat ditemukan di sini:

Dragleave HTML5 dipecat saat melayang elemen anak

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

Versi saya:

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

Dengan tata letak ini:

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

Aku sudah membuat dump kelas elemen untuk e.target, e.currentTarget, e.relatedTargetuntuk kedua dragoverdandragleave peristiwa.

Itu menunjukkan kepada saya bahwa saat meninggalkan blok induk ( .dropzone) e.relatedTargetbukan anak dari blok ini jadi saya tahu saya keluar dari dropzone.

Di sini, salah satu solusi paling sederhana ● ︿ ●

Lihatlah biola ini <- coba seret beberapa file di dalam kotak

Anda dapat melakukan sesuatu seperti ini:

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

Dengan itu Anda harus sudah tahu apa yang terjadi di sini.
Lihatlah biola itu, kau tahu.

Saya memiliki masalah yang sama dan saya memperbaikinya dengan cara ini:

Masalahnya: Fungsi drop (ev) diaktifkan ketika pengguna menjatuhkan elemen di "drop zone" (elemen ul), tetapi, sayangnya, juga ketika elemen tersebut dijatuhkan di salah satu anak-anaknya (elemen li).

Cara mengatasinya:

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

Saya mencoba menerapkan ini sendiri untuk kotak unggah file tempat warna kotak akan berubah ketika pengguna menyeret file ke ruang kosong.

Saya menemukan solusi perpaduan yang bagus antara Javascript dan CSS. Katakanlah Anda memiliki zona droppable divdengan id #drop. Tambahkan ini ke Javascript Anda:

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

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

Kemudian, tambahkan ini ke CSS Anda, untuk menonaktifkan semua anak akan kelas .inactive:

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

Dengan demikian, elemen anak-anak akan tidak aktif selama pengguna menyeret elemen ke atas kotak.

Saya tidak merasa puas dengan solusi yang disajikan di sini, karena saya tidak ingin kehilangan kendali atas elemen anak-anak.

Jadi saya telah menggunakan pendekatan logika yang berbeda, menerjemahkannya ke dalam plugin jQuery, yang disebut jquery-draghandler . Sama sekali tidak memanipulasi DOM, menjamin kinerja tinggi. Penggunaannya sederhana:

$(document).ready(function() {

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

});

Ini menangani masalah dengan sempurna tanpa mengorbankan fungsi DOM.

Unduh, detail, dan penjelasan di repositori Git -nya .

Saya sebenarnya menyukai apa yang saya lihat https://github.com/lolmaus/jquery.dragbetter/tetapi ingin berbagi alternatif yang mungkin. Strategi umum saya adalah menerapkan gaya latar belakang ke dropzone (bukan anak-anaknya) saat menyeretnya atau anak mana pun darinya (melalui menggelegak). Lalu saya menghapus gaya ketika menyeret zona penurunan. Gagasannya adalah ketika pindah ke seorang anak, bahkan jika saya menghapus gaya dari dropzone ketika meninggalkannya (dragleave menyala), saya hanya akan menerapkan kembali gaya ke dropzone induk pada menyeret setiap anak. Masalahnya tentu saja adalah bahwa ketika pindah dari dropzone ke anak dari dropzone, dragenter dipecat pada anak sebelum dragleave, jadi gaya saya diterapkan rusak. Solusi bagi saya adalah dengan menggunakan timer untuk memaksa acara dragenter kembali ke antrian pesan, memungkinkan saya untuk memprosesnya SETELAH dragleave. Saya menggunakan penutupan untuk mengakses acara di callback timer.

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

Ini sepertinya bekerja di chrome, yaitu, firefox dan berfungsi terlepas dari jumlah anak di dropzone. Saya sedikit gelisah tentang batas waktu yang menjamin penyeimbangan kembali peristiwa, tetapi tampaknya bekerja cukup baik untuk kasus penggunaan saya.

Saya mencoba menerapkan ini sendiri, dan saya tidak ingin Jquery atau plugin apa pun.

Saya ingin menangani unggahan file, dengan cara berikut yang dianggap terbaik bagi saya:

Struktur File:

--- / uploads {uploads directory}

--- /js/slyupload.js {file javascript.}

--- index.php

--- unggah.php

--- styles.css {hanya sedikit gaya ..}

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

Maka ini adalah File Javascript terlampir :: '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;
}

Maaf itu javascript bukan jquery, tetapi bagi saya itu adalah cara paling logis untuk menyelesaikannya. Browser harus memanggil dropleave (elemen sebelumnya) sebelum dropenter (atau elemen baru, karena sesuatu tidak dapat memasukkan sesuatu yang lain sebelum meninggalkan hal pertama, saya tidak mengerti mengapa mereka melakukan itu! Jadi Anda hanya perlu menunda de dropleave seperti itu:

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

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

Dan dropenter akan terjadi setelah dropleave, itu saja!

Gunakan greedy : trueuntuk anak sebagai fungsi dari droppable. Maka mulailah acara hanya diklik pada lapisan pertama.