'dragleave' de elementos primarios se dispara al arrastrar elementos secundarios

Visión general

Tengo la siguiente estructura HTML y he adjuntado los eventos dragentery dragleaveal <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

Cuando arrastro un archivo sobre <div id="dropzone">, el dragenterevento se dispara como se esperaba. Sin embargo, cuando muevo el mouse sobre un elemento secundario, como <div id="drag-n-drop">, el dragenterevento se activa para el <div id="drag-n-drop">elemento y luego el dragleaveevento se activa para el <div id="dropzone">elemento.

Si vuelvo a pasar el cursor sobre el <div id="dropzone">elemento nuevamente, el dragenterevento se activa nuevamente, lo cual es genial, pero luego el dragleaveevento se activa para el elemento secundario que acaba de salir, por lo removeClassque se ejecuta la instrucción, que no es genial.

Este comportamiento es problemático por 2 razones:

1. Solo estoy adjuntando dragentery dragleaveal, <div id="dropzone">así que no entiendo por qué los elementos secundarios también tienen estos eventos adjuntos.

2. ¡Todavía estoy arrastrando sobre el <div id="dropzone">elemento mientras se cierne sobre sus hijos, así que no quiero dragleavedisparar!

jsFiddle

Aquí hay un jsFiddle para jugar: http://jsfiddle.net/yYF3S/2/

Pregunta

Entonces ... ¿cómo puedo hacerlo de tal manera que cuando estoy arrastrando un archivo sobre el <div id="dropzone">elemento, dragleaveno se dispara incluso si estoy arrastrando sobre cualquier elemento secundario ... solo debería dispararse cuando salgo del <div id="dropzone">elemento ... Al desplazarse / arrastrarse por cualquier lugar dentro de los límites del elemento no se debe activar el dragleaveevento.

Necesito que esto sea compatible con varios navegadores, al menos en los navegadores que admiten arrastrar y soltar HTML5, por lo que esta respuesta no es adecuada.

Parece que Google y Dropbox han resuelto esto, pero su código fuente es reducido / complejo, por lo que no he podido resolverlo a partir de su implementación.

Si no necesita vincular eventos a los elementos secundarios, siempre puede usar la propiedad puntero-eventos.

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

Finalmente encontré una solución con la que estoy contento. En realidad, encontré varias formas de hacer lo que quiero, pero ninguna fue tan exitosa como la solución actual ... en una solución, experimenté parpadeos frecuentes como resultado de agregar / eliminar un borde al #dropzoneelemento ... en otra, el borde nunca se eliminó si te alejas del navegador.

De todos modos, mi mejor solución hacky es 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;
});

Esto funciona bastante bien, pero surgieron problemas en Firefox porque Firefox estaba dragenterhaciendo doble invocación, así que mi contador estaba apagado. Pero, sin embargo, no es una solución muy elegante.

Luego me topé con esta pregunta: cómo detectar el evento dragleave en Firefox al arrastrar fuera de la ventana

Entonces tomé la respuesta y la apliqué a mi situación:

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

Esto es limpio y elegante y parece estar funcionando en todos los navegadores que he probado hasta ahora (aún no he probado IE).

¡Esto es un poco feo pero funciona maldita sea! ...

En su controlador 'dragenter' almacene el event.target (en una variable dentro de su cierre, o lo que sea), luego en su controlador 'dragleave' solo active su código si event.target === el que almacenó.

Si su 'dragenter' está disparando cuando no lo desea (es decir, cuando ingresa después de dejar elementos secundarios), entonces la última vez que se dispara antes de que el mouse abandone al padre, está en el padre, por lo que el padre siempre estará el 'grageador' final antes del 'dragleave' previsto.

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

}());

Al principio, acepté que la gente descartara el pointer-events: noneenfoque. Pero luego me pregunté:

¿Realmente necesita eventos de puntero para trabajar en los elementos secundarios mientras se está arrastrando ?

En mi caso, tengo muchas cosas que suceden en los niños, por ejemplo, desplazar el mouse para mostrar botones para acciones adicionales, edición en línea, etc. Sin embargo, nada de eso es necesario o incluso deseado durante un arrastre.

En mi caso, uso algo como esto para desactivar selectivamente los eventos de puntero para todos los nodos secundarios del contenedor primario:

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

Use su enfoque favorito para agregar / eliminar la clase dragging-in-progressen los controladores de eventos dragEnter/ dragLeave, como hice o hago lo mismo en dragStartet. Alabama.

Esto parece ser un error de Chrome.

La única solución que se me ocurrió fue crear un elemento de superposición transparente para capturar sus 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>
​

El problema es que sus elementos dentro de las zonas de caída son, por supuesto, parte de la zona de caída y cuando ingresa a los elementos secundarios, deja a los padres. Resolver esto no es fácil. Puede intentar agregar eventos a los niños también agregando su clase nuevamente a los padres.

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

    // add a class to #dropzone

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

Sus eventos aún se dispararán varias veces, pero nadie lo verá.

// Editar: use el evento dragmove para sobrescribir permanentemente el 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 el evento dragleave solo para la zona de caída.

Como se menciona en esta respuesta , puede evitar que los nodos secundarios se activen en eventos, pero si necesita vincular algunos eventos, haga lo siguiente:

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

Y agregue este a su código JS:

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

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

Si está utilizando jQuery, consulte esto: https://github.com/dancork/jquery.event.dragout

Es realmente asombroso.

Evento especial creado para manejar la verdadera funcionalidad de dragleave.

El evento de dragleave HTML5 funciona más como mouseout. Este complemento se creó para replicar la funcionalidad de estilo mouseleave mientras se arrastra.

Ejemplo de uso:

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

EDITAR: en realidad, no creo que dependa de jQuery, probablemente pueda usar el código incluso sin él.

@hristo Tengo una solución mucho más elegante. Comprueba que si eso es algo que podrías usar.

Su esfuerzo no fue malgastado después de todo. Al principio pude usar el tuyo, pero tuve diferentes problemas en FF, Chrome. Después de pasar tantas horas, recibí esa sugerencia funcionando exactamente como estaba previsto.

Así es como es la implementación. También aproveché las señales visuales para guiar correctamente a los usuarios sobre la zona de colocación.

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

Mis dos centavos: esconde una capa sobre tu zona de caída y luego muéstrala cuando grabas en el centro, y apunta al dragleave sobre ella.

Demostración: 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;
});

Entonces, para mí, el enfoque pointer-events: none;no funcionó demasiado bien ... Así que aquí está mi solución alternativa:

    #dropzone {
        position: relative;
    }

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

De esta manera no es posible dragleaveel elemento primario (en un elemento secundario) o dragoverun elemento secundario. espero que esto ayude :)

* La clase '.active' agrego cuando dragenter o dragleave. Pero si está trabajando sin eso, simplemente deje la clase ausente.

Solución rápida súper simple para esto, no se ha probado exhaustivamente pero funciona en Chrome en este momento.

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

Esto soluciona el error de parpadeo de Chrome, o al menos la permutación que me causaba problemas.

Esta respuesta se puede encontrar aquí:

Se activa el dragleave HTML5 al pasar el cursor sobre un elemento secundario

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

Mi version:

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

Con este diseño:

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

He hecho un vaciado de las clases de elementos para e.target, e.currentTarget, e.relatedTargetpara ambos dragovery dragleaveeventos.

Me demostró que al dejar el bloque padre ( .dropzone) e.relatedTargetno es un hijo de este bloque, así que sé que estoy fuera de la zona de caída.

Aquí, una de las soluciones más simples ● ︿ ●

Eche un vistazo a este violín <- intente arrastrar algún archivo dentro del cuadro

Puedes hacer algo como esto:

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 eso ya deberías saber lo que está sucediendo aquí.
Solo echa un vistazo al violín, ya sabes.

He tenido un problema similar y lo solucioné de esta manera:

El problema: la función drop (ev) se activa cuando el usuario coloca un elemento en la "zona drop" (elemento ul), pero, desafortunadamente, también cuando el elemento se cae en uno de sus elementos secundarios (elementos li).

La solución:

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

Intenté implementar esto yo mismo para un cuadro de carga de archivos donde el color del cuadro cambiaría cuando los usuarios arrastraran un archivo al espacio.

Encontré una solución que es una buena combinación de Javascript y CSS. Digamos que tiene una zona desplegable divcon id #drop. Agregue esto a su Javascript:

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

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

Luego, agregue esto a su CSS, para inactivar todos los niños clasificarán .inactive:

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

Por lo tanto, los elementos secundarios estarán inactivos mientras el usuario arrastre el elemento sobre el cuadro.

No me sentí satisfecho con ninguna de las soluciones presentadas aquí, porque no quiero perder el control sobre los elementos secundarios.

Así que he usado un enfoque lógico diferente, traduciéndolo en un complemento jQuery, llamado jquery-draghandler . No manipula absolutamente el DOM, garantizando altas prestaciones. Su uso es simple:

$(document).ready(function() {

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

});

Aborda perfectamente el problema sin comprometer ninguna funcionalidad DOM.

Descarga, detalles y explicaciones en su repositorio Git .

De hecho, me gusta lo que veo en https://github.com/lolmaus/jquery.dragbetter/pero quería compartir una posible alternativa. Mi estrategia general era aplicar un estilo de fondo a la zona de caída (no a sus elementos secundarios) cuando la graficaba a ella o a cualquier elemento secundario (mediante burbujeo). Luego elimino el estilo al dragleaving la zona de caída. La idea era cuando me mudaba a un niño, incluso si elimino el estilo de la zona de caída cuando lo dejo (los fuegos de dragleave), simplemente volvería a aplicar el estilo a la zona de caída principal al ingresar a cualquier niño. El problema es, por supuesto, que cuando me muevo de la zona de caída a un niño de la zona de caída, la gragera se dispara sobre el niño antes de la caída del dragle, por lo que mis estilos se aplicaron fuera de orden. La solución para mí fue usar un temporizador para forzar el evento dragenter de nuevo a la cola de mensajes, lo que me permitió procesarlo DESPUÉS de la secuencia de descarga. Usé un cierre para acceder al evento en la devolución de llamada del temporizador.

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

Esto parece funcionar en Chrome, es decir, Firefox y funciona independientemente de la cantidad de niños en la zona de caída. Estoy un poco incómodo con el tiempo de espera que garantiza la secuenciación de eventos, pero parece funcionar bastante bien para mi caso de uso.

Estaba tratando de implementar esto yo mismo, y tampoco quería Jquery ni ningún complemento.

Quería manejar la carga del archivo, de la siguiente manera me pareció mejor:

Estructura de archivos:

--- / uploads {directorio de cargas}

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

--- index.php

--- upload.php

--- styles.css {solo un poco 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>

Entonces este es el archivo Javascript adjunto :: '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;
}

Lo siento, es javascript, no jquery, pero para mí es la forma más lógica de resolverlo. El navegador debe llamar a dropleave (del elemento anterior) antes de dropenter (ofr the new element, ya que algo no puede ingresar a otra cosa antes de dejar lo primero, ¡no entiendo por qué lo hicieron! Así que solo necesita retrasar de dropleave así:

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

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

Y el dropenter ocurrirá después del dropleave, ¡eso es todo!

Utilice el greedy : truepara el niño como una función de droppable. Luego, inicie solo el evento en el que se hizo clic en la primera capa.