'dragleave' de l'élément parent se déclenche lors du glissement sur des éléments enfants

Aperçu

J'ai la structure HTML suivante et j'ai attaché les événements dragenteret dragleaveà l' <div id="dropzone">élément.

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

Problème

Lorsque je fais glisser un fichier sur le <div id="dropzone">, l' dragenterévénement est déclenché comme prévu. Cependant, lorsque je déplace ma souris sur un élément enfant, tel que <div id="drag-n-drop">, l' dragenterévénement est déclenché pour l' <div id="drag-n-drop">élément, puis l' dragleaveévénement est déclenché pour l' <div id="dropzone">élément.

Si je survole à <div id="dropzone">nouveau l' élément, l' dragenterévénement est à nouveau déclenché, ce qui est cool, mais l' dragleaveévénement est déclenché pour l'élément enfant qui vient de quitter, donc l' removeClassinstruction est exécutée, ce qui n'est pas cool.

Ce comportement est problématique pour 2 raisons:

1. Je m'attache seulement dragenter& dragleaveau<div id="dropzone"> donc je ne comprends pas pourquoi les éléments enfants ont ces événements attachés aussi bien.

2. Je traîne toujours sur l' <div id="dropzone">élément tout en survolant ses enfants donc je ne veux dragleavepas tirer!

jsFiddle

Voici un jsFiddle à bricoler: http://jsfiddle.net/yYF3S/2/

Question

Alors ... comment puis-je faire en sorte que lorsque je fais glisser un fichier sur l' <div id="dropzone">élément, dragleavene se déclenche pas même si je traîne sur des éléments enfants ... il ne devrait se déclencher que lorsque je quitte l' <div id="dropzone">élément ... . le survol / le glissement n'importe où dans les limites de l'élément ne doit pas déclencher l' dragleaveévénement.

J'ai besoin que cela soit compatible avec tous les navigateurs, au moins dans les navigateurs prenant en charge le glisser-déposer HTML5, donc cette réponse n'est pas adéquate.

Il semble que Google et Dropbox aient compris cela, mais leur code source est minifié / complexe, donc je n'ai pas été en mesure de comprendre cela à partir de leur implémentation.

Si vous n'avez pas besoin de lier des événements aux éléments enfants, vous pouvez toujours utiliser la propriété pointer-events.

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

J'ai finalement trouvé une solution qui me satisfait. En fait, j'ai trouvé plusieurs façons de faire ce que je veux mais aucune n'a été aussi réussie que la solution actuelle ... dans une solution, j'ai connu des scintillements fréquents à la suite de l'ajout / suppression d'une bordure à l' #dropzoneélément ... dans une autre, la bordure n'a jamais été supprimé si vous vous éloignez du navigateur.

Quoi qu'il en soit, ma meilleure solution hacky est la suivante:

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

Cela fonctionne plutôt bien mais des problèmes sont survenus dans Firefox car Firefox invoquait deux fois dragenterdonc mon compteur était désactivé. Mais néanmoins, ce n'est pas une solution très élégante.

Ensuite, je suis tombé sur cette question: Comment détecter l'événement dragleave dans Firefox lors du glissement hors de la fenêtre

J'ai donc pris la réponse et l' ai appliquée à ma situation:

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

C'est propre et élégant et semble fonctionner dans tous les navigateurs que j'ai testés jusqu'à présent (je n'ai pas encore testé IE).

C'est un peu moche mais ça marche bon sang! ...

Sur votre gestionnaire 'dragenter', stockez event.target (dans une variable à l'intérieur de votre fermeture, ou autre), puis dans votre gestionnaire 'dragleave' ne lancez votre code que si event.target === celui que vous avez stocké.

Si votre 'dragenter' se déclenche lorsque vous ne le souhaitez pas (c'est-à-dire lorsqu'il entre après avoir quitté des éléments enfants), la dernière fois qu'il se déclenche avant que la souris ne quitte le parent, c'est sur le parent, donc le parent sera toujours le «dragenter» final avant le «dragleave» prévu.

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

}());

Au début, j'étais d'accord avec les gens qui rejetaient l' pointer-events: noneapproche. Mais ensuite je me suis demandé:

Avez-vous vraiment besoin d'événements de pointeur pour travailler sur les éléments enfants pendant que le glissement est en cours ?

Dans mon cas, j'ai beaucoup de choses en cours dans les enfants, par exemple, survoler pour afficher des boutons pour des actions supplémentaires, l'édition en ligne, etc. Cependant, rien de tout cela n'est nécessaire ou même souhaité lors d' un glisser.

Dans mon cas, j'utilise quelque chose comme ceci pour désactiver les événements de pointeur de manière sélective pour tous les nœuds enfants du conteneur parent:

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

Utilisez votre approche préférée pour ajouter / supprimer la classe dragging-in-progressdans les gestionnaires dragEnter/ dragLeaveevent, comme je l'ai fait ou faites de même dans dragStart, et. Al.

Cela semble être un bogue de Chrome.

La seule solution de contournement à laquelle je pouvais penser était de créer un élément de superposition transparent pour capturer vos événements: 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>
​

Le problème est que vos éléments à l'intérieur des dropzones font bien sûr partie de la dropzone et lorsque vous entrez les enfants, vous quittez le parent. Résoudre ce problème n'est pas facile. Vous pouvez également essayer d'ajouter des événements aux enfants en ajoutant à nouveau votre classe au parent.

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

    // add a class to #dropzone

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

Vos événements se déclencheront toujours plusieurs fois mais personne ne le verra.

// Edit: utilisez l'événement dragmove pour écraser définitivement l'événement dragleave:

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

    // add a class to #dropzone

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

Définissez l'événement dragleave uniquement pour la zone de dépôt.

Comme benr l'a mentionné dans cette réponse , vous pouvez empêcher les nœuds enfants de se déclencher sur des événements, mais si vous devez lier certains événements, procédez comme suit :

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

Et ajoutez celui-ci à votre code JS:

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

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

Si vous utilisez jQuery, vérifiez ceci: https://github.com/dancork/jquery.event.dragout

C'est vraiment génial.

Événement spécial créé pour gérer la véritable fonctionnalité de dragleave.

L'événement HTML5 dragleave fonctionne plus comme mouseout. Ce plugin a été créé pour reproduire la fonctionnalité de style mouseleave tout en faisant glisser.

Exemple d'utilisation:

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

EDIT: en fait, je ne pense pas que cela dépende de jQuery, vous pouvez probablement simplement utiliser le code même sans.

@hristo J'ai une solution beaucoup plus élégante. Vérifiez que si c'est quelque chose que vous pourriez utiliser.

Vos efforts n'ont pas été vains après tout. J'ai réussi à utiliser le vôtre au début, mais j'ai eu différents problèmes dans FF, Chrome. Après avoir passé tant d'heures, cette suggestion a fonctionné exactement comme prévu.

Voici comment se déroule la mise en œuvre. J'ai également profité des repères visuels pour guider correctement les utilisateurs sur la zone de dépôt.

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

Mes deux cents: Cachez un calque sur votre zone de dépôt, puis affichez-le lorsque vous faites glisser et ciblez le dragleave dessus.

Démo: 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;
});

Donc pour moi, l'approche pointer-events: none;n'a pas très bien fonctionné ... Voici donc ma solution alternative:

    #dropzone {
        position: relative;
    }

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

De cette façon, il n'est pas possible au dragleaveparent (sur un enfant) oudragover un élément enfant. J'espère que cela t'aides :)

* La classe '.active' que j'ajoute quand je dragenterou dragleave. Mais si vous travaillez sans cela, laissez la classe à l'écart.

Solution rapide super simple pour cela, non testée de manière approfondie mais fonctionne actuellement dans Chrome.

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

Cela corrige le bogue de scintillement de Chrome, ou du moins la permutation de celui-ci qui me causait des problèmes.

Cette réponse peut être trouvée ici:

Dragleave HTML5 déclenché lors du survol d'un élément enfant

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

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

Avec cette disposition:

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

Je l' ai fait une décharge de classes d'éléments pour e.target, e.currentTarget, e.relatedTargetpour les deux dragoveretdragleave les événements.

Cela m'a montré qu'en quittant le bloc parent (.dropzone )e.relatedTarget n'est pas un enfant de ce bloc, donc je sais que je suis hors de la zone de dépôt.

Ici, une des solutions les plus simples ● ︿ ●

Jetez un œil à ce violon <- essayez de faire glisser un fichier dans la boîte

Vous pouvez faire quelque chose comme ceci:

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

Par cela, vous devriez déjà savoir ce qui se passe ici.
Jetez un œil au violon, vous savez.

J'ai eu un problème similaire et je l'ai résolu de cette façon:

Le problème: La fonction drop (ev) est déclenchée lorsque l'utilisateur dépose un élément dans la "drop zone" (élément ul), mais malheureusement aussi lorsque l'élément est déposé dans l'un de ses enfants (éléments li).

Le correctif:

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

J'essayais de l'implémenter moi-même pour une boîte de téléchargement de fichiers où la couleur de la boîte changerait lorsque les utilisateurs faisaient glisser un fichier dans l'espace.

J'ai trouvé une solution qui est un bon mélange de Javascript et de CSS. Supposons que vous ayez une zone de dépôt divavec identifiant #drop. Ajoutez ceci à votre Javascript:

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

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

Ensuite, ajoutez ceci à votre CSS, pour désactiver tous les enfants classera .inactive:

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

Ainsi, les éléments enfants seront inactifs tant que l'utilisateur fera glisser l'élément sur la boîte.

Je ne me suis senti satisfait d'aucune des solutions de contournement présentées ici, car je ne veux pas perdre le contrôle des éléments enfants.

J'ai donc utilisé une approche logique différente, en la traduisant en un plugin jQuery, appelé jquery-draghandler . Il ne manipule absolument pas le DOM, garantissant des performances élevées. Son utilisation est simple:

$(document).ready(function() {

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

});

Il traite parfaitement le problème sans compromettre aucune fonctionnalité DOM.

Téléchargement, détails et explications sur son référentiel Git .

J'aime vraiment ce que je vois https://github.com/lolmaus/jquery.dragbetter/mais voulait partager une alternative possible. Ma stratégie générale était d'appliquer un style d'arrière-plan à la zone de dépôt (et non à ses enfants) lors de son entrée par glisser-déposer ou de l'un de ses enfants (via le bullage). Ensuite, je supprime le style lors du glissement de la zone de dépôt. L'idée était lors du passage à un enfant, même si je supprimais le style de la zone de dépôt en le quittant (le dragleave se déclenche), je réappliquerais simplement le style à la zone de dépôt parent en introduisant un enfant par glisser-déposer. Le problème est bien sûr que lors du passage de la zone de dépôt à un enfant de la zone de dépôt, le dragenter est déclenché sur l'enfant avant le dragleave, donc mes styles ont été appliqués dans le désordre. La solution pour moi était d'utiliser une minuterie pour forcer l'événement dragenter à revenir dans la file d'attente des messages, me permettant de le traiter APRÈS le dragleave. J'ai utilisé une fermeture pour accéder à l'événement sur le rappel du minuteur.

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

Cela semble fonctionner dans Chrome, c'est-à-dire Firefox et fonctionne quel que soit le nombre d'enfants dans la zone de dépôt. Je suis un peu inquiet quant au délai d'attente garantissant le reséquençage des événements, mais cela semble fonctionner plutôt bien pour mon cas d'utilisation.

J'essayais de l'implémenter moi-même, et je ne voulais pas non plus de Jquery ou de tout autre plugin.

Je voulais gérer le téléchargement du fichier, de la manière la plus appropriée pour moi:

Structure des fichiers:

--- / uploads {répertoire de téléversements}

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

--- index.php

--- upload.php

--- styles.css {juste un peu de style ..}

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

Ensuite, voici le fichier Javascript attaché :: '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;
}

Désolé, ce n'est pas javascript jquery, mais pour moi, c'est le moyen le plus logique de résoudre ce problème. Le navigateur devrait appeler dropleave (de l'élément précédent) avant dropenter (du nouvel élément, comme quelque chose ne peut pas entrer autre chose avant d'avoir quitté la première chose, je ne comprends pas pourquoi ils l'ont fait! Il vous suffit donc de retarder de dropleave comme ça:

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

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

Et le dropenter se produira après le dropleave, c'est tout!

Utilisez le greedy : trueà l'enfant en fonction de droppable. Ensuite, démarrez uniquement l'événement cliqué sur la première couche.