'dragleave' do elemento pai é acionado ao arrastar sobre os elementos filhos

Visão geral

Eu tenho a seguinte estrutura HTML e anexei os eventos dragentere dragleaveao <div id="dropzone">elemento

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

Problema

Quando arrasto um arquivo sobre o <div id="dropzone">, o dragenterevento é disparado conforme o esperado. No entanto, quando movo o mouse sobre um elemento filho, como <div id="drag-n-drop">, o dragenterevento é disparado para o <div id="drag-n-drop">elemento e, em seguida, o dragleaveevento é disparado para o <div id="dropzone">elemento.

Se eu passar o mouse sobre o <div id="dropzone">elemento novamente, o dragenterevento é acionado novamente, o que é legal, mas o dragleaveevento é acionado para o elemento filho que acabou de sair, para que a removeClassinstrução seja executada, o que não é legal.

Esse comportamento é problemático por 2 razões:

1. Estou apenas anexando dragenter& dragleaveao, <div id="dropzone">para não entender por que os elementos filhos também têm esses eventos anexados.

2. Ainda estou arrastando o <div id="dropzone">elemento enquanto passa o mouse sobre seus filhos, para não querer dragleavedisparar!

jsFiddle

Aqui está um jsFiddle para mexer com: http://jsfiddle.net/yYF3S/2/

Questão

Então ... como posso fazer isso de modo que, ao arrastar um arquivo sobre o <div id="dropzone">elemento, dragleavenão seja acionado, mesmo se estiver arrastando sobre qualquer elemento filho ... ele deve ser acionado somente quando eu deixar o <div id="dropzone">elemento .. pairar / arrastar ao redor de qualquer lugar dentro dos limites do elemento não deve acionar o dragleaveevento.

Eu preciso que isso seja compatível com vários navegadores, pelo menos nos navegadores que oferecem suporte ao arrastar e soltar HTML5, portanto, essa resposta não é adequada.

Parece que o Google e o Dropbox descobriram isso, mas o código fonte é minificado / complexo, então não consegui descobrir isso com a implementação.

Se você não precisar vincular eventos aos elementos filhos, sempre poderá usar a propriedade pointer-events.

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

Finalmente encontrei uma solução com a qual estou feliz. Na verdade, eu encontrei várias maneiras de fazer o que eu quero, mas nenhuma foi tão bem-sucedida quanto a solução atual ... em uma solução, experimentei oscilações frequentes como resultado da adição / remoção de uma borda ao #dropzoneelemento ... em outra, a borda nunca foi removido se você se afastar do navegador.

Enfim, minha melhor solução hacky é esta:

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

Isso funciona muito bem, mas surgiram problemas no Firefox porque o Firefox estava invocando duas vezes, dragenterentão meu contador estava desligado. Mas, no entanto, não é uma solução muito elegante.

Então me deparei com esta pergunta: Como detectar o evento dragleave no Firefox ao arrastar para fora da janela

Então, peguei a resposta e a apliquei à minha situação:

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

Isso é limpo e elegante e parece estar funcionando em todos os navegadores que testei até agora (ainda não testei o IE).

Isso é um pouco feio, mas funciona caramba! ...

No manipulador 'dragenter', armazene o event.target (em uma variável dentro do seu fechamento, ou qualquer outra coisa); em seguida, no manipulador 'dragleave', somente o código será acionado se event.target === o que você armazenou.

Se o seu 'dragenter' está disparando quando você não deseja (por exemplo, quando entra após deixar os elementos filhos), na última vez em que dispara antes que o mouse saia do pai, ele está no pai, portanto, o pai sempre estará o 'dragenter' final antes do 'dragleave' pretendido.

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

}());

No começo, eu concordei com as pessoas que descartaram a pointer-events: noneabordagem. Mas então eu me perguntei:

Você realmente precisa de eventos de ponteiro para trabalhar nos elementos filhos enquanto o arrasto está em andamento ?

No meu caso, eu tenho um monte de coisas acontecendo nas crianças, por exemplo pairar para mostrar botões para ações adicionais, inline-edição, etc ... No entanto, nenhum de que é necessário ou, de fato, mesmo desejado durante um arrasto.

No meu caso, uso algo assim para desativar os eventos do ponteiro seletivamente para todos os nós filhos do contêiner pai:

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

Use sua abordagem favorita para adicionar / remover a classe dragging-in-progressnos manipuladores dragEnter/ dragLeaveevent, como eu fiz ou fiz no mesmo dragStart, et. al.

Este parece ser um bug do Chrome.

A única solução alternativa em que pude pensar foi criar um elemento de sobreposição transparente para capturar seus eventos: 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>
​

O problema é que seus elementos dentro das zonas de drop fazem parte do dropzone e, quando você entra nos filhos, deixa o pai. Resolver isso não é fácil. Você pode tentar adicionar eventos aos filhos e adicionar sua classe novamente aos pais.

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

    // add a class to #dropzone

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

Seus eventos ainda serão disparados várias vezes, mas ninguém verá.

// Edit: Use o evento dragmove para sobrescrever permanentemente o evento dragleave:

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

    // add a class to #dropzone

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

Defina o evento dragleave apenas para o dropzone.

Como benr mencionado nesta resposta , você pode impedir que os nós filhos disparem nos eventos, mas se precisar vincular alguns eventos, faça o seguinte:

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

E adicione este ao seu código JS:

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

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

Se você estiver usando jQuery, verifique isso: https://github.com/dancork/jquery.event.dragout

É realmente incrível.

Evento especial criado para lidar com a verdadeira funcionalidade de arrastar.

O evento HTML5 dragleave funciona mais como mouseout. Este plug-in foi criado para replicar a funcionalidade de estilo de ratoeira enquanto arrasta.

Exemplo de uso:

$ ('# myelement'). on ('dragout', function (evento) {// SEU CÓDIGO});

Edição: na verdade, eu não acho que é dependente do jQuery, você provavelmente pode apenas usar o código, mesmo sem ele.

@hristo Eu tenho uma solução muito mais elegante. Verifique se isso é algo que você poderia usar.

Seu esforço não foi desperdiçado, afinal. Consegui usar o seu no começo, mas tive problemas diferentes no FF, Chrome. Depois de passar tantas horas, recebi a sugestão funcionando exatamente como pretendido.

Aqui está como está a implementação. Também aproveitei as dicas visuais para orientar corretamente os usuários sobre a zona de queda.

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

Meus dois centavos: oculte uma camada sobre o seu dropzone e mostre-o quando você arrastar, e direcione o botão de arrastar para ele.

Demonstração: 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;
});

Então, para mim, a abordagem pointer-events: none;não funcionou muito bem ... Então, aqui está minha solução alternativa:

    #dropzone {
        position: relative;
    }

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

Dessa forma, não é possível para dragleaveo pai (em um filho) ou dragoverum elemento filho. espero que isto ajude :)

* A classe '.active' que adiciono quando eu dragenterou dragleave. Mas se você estiver trabalhando sem isso, deixe a aula de lado.

Correção rápida super simples para isso, não testada extensivamente, mas funciona no Chrome no momento.

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

Isso corrige o bug de cintilação do Chrome, ou pelo menos a permutação que estava me causando problemas.

Esta resposta pode ser encontrada aqui:

A arrastar em HTML5 é acionada ao passar o mouse sobre um elemento filho

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

Minha versão:

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

Com este layout:

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

Eu fiz um despejo de classes de elemento para e.target, e.currentTarget, e.relatedTargetpara ambos dragovere dragleaveeventos.

Ele me mostrou que ao deixar o bloco pai ( .dropzone) e.relatedTargetnão é filho desse bloco, então eu sei que estou fora do dropzone.

Aqui, uma das soluções mais simples ● ︿ ●

Dê uma olhada neste violino <- tente arrastar algum arquivo dentro da caixa

Você pode fazer algo assim:

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

Por isso você já deve saber o que está acontecendo aqui.
Basta dar uma olhada no violino, você sabe.

Eu tive um problema semelhante e corrigi-lo desta maneira:

O problema: a função drop (ev) é acionada quando o usuário solta um elemento na "zona de soltar" (elemento ul), mas, infelizmente, também quando o elemento é solto em um de seus filhos (elementos li).

O conserto:

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

Eu mesmo estava tentando implementar isso em uma caixa de upload de arquivos em que a cor da caixa mudava quando os usuários arrastavam um arquivo para o espaço.

Encontrei uma solução que é uma boa mistura de Javascript e CSS. Digamos que você tenha uma zona de droppable divcom id #drop. Adicione isso ao seu Javascript:

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

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

Em seguida, adicione isso ao seu CSS, para desativar todos os filhos da classe .inactive:

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

Assim, os elementos filhos permanecerão inativos enquanto o usuário arrastar o elemento sobre a caixa.

Não me senti satisfeito com nenhuma das soluções alternativas apresentadas aqui, porque não quero perder o controle sobre os elementos filhos.

Então, eu usei uma abordagem lógica diferente, traduzindo-a em um plugin jQuery, chamado jquery-draghandler . Absolutamente não manipula o DOM, garantindo altos desempenhos. Seu uso é simples:

$(document).ready(function() {

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

});

Ele lida perfeitamente com o problema sem comprometer nenhuma funcionalidade do DOM.

Download, detalhes e explicações em seu repositório Git .

Na verdade, estou gostando do que vejo em https://github.com/lolmaus/jquery.dragbetter/mas queria compartilhar uma possível alternativa. Minha estratégia geral era aplicar um estilo de segundo plano ao dropzone (não a seus filhos) ao arrastá-lo ou a qualquer filho dele (por meio de bolhas). Depois, removo o estilo ao arrastar a zona de soltar. A idéia era ao mudar para uma criança, mesmo que eu remova o estilo do dropzone ao deixá-lo (o dragleave dispara), simplesmente reaplicaria o estilo ao dropzone pai ao arrastar qualquer criança. É claro que o problema é que, ao passar do dropzone para um filho do dropzone, o dragenter é demitido do filho antes do saque, então meus estilos são aplicados fora de ordem. A solução para mim foi usar um timer para forçar o evento dragenter de volta à fila de mensagens, permitindo processá-lo APÓS a saída de arrastar. Usei um fechamento para acessar o evento no retorno de chamada do timer.

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

Isso parece funcionar no chrome, ou seja, no firefox e funciona independentemente do número de filhos no dropzone. Estou um pouco desconfortável com o tempo limite que garante o reequilíbrio de eventos, mas parece funcionar muito bem no meu caso de uso.

Eu estava tentando implementar isso sozinho e também não queria o Jquery ou qualquer plug-in.

Eu queria lidar com o upload do arquivo, da seguinte maneira considerada melhor para mim:

Estrutura de Arquivos:

--- / uploads {diretório de uploads}

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

--- index.php

--- upload.php

--- styles.css {apenas um pouco de estilo ..}

Código 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>

Então este é o arquivo Javascript anexado :: '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;
}

Desculpe, é javascript, não jquery, mas para mim é a maneira mais lógica de resolver isso. O navegador deve chamar dropleave (do elemento anterior) antes de dropenter (do novo elemento, como algo não pode entrar em outra coisa antes de deixar a primeira coisa, não entendo por que eles fizeram isso! Então você só precisa atrasar de dropleave assim:

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

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

E o dropenter acontecerá após o dropleave, só isso!

Use o greedy : truepara a criança como uma função de droppable. Em seguida, inicie apenas o evento clicado na primeira camada.