J'essaie d'atteindre le même effet que sur imgur.com (faites glisser un fichier du bureau à imgur.com et vous verrez une superposition de cool). Vous avez déjà une solution de travail grâce à ce message: Propagation d'événement , superposition et événements de glisser-déposer
Mais: Je trouve la solution plutôt insatisfaisante. Le problème est $ (document) .on ('Dragenter') est tiré plusieurs fois lors de la survolée des éléments d'enfant. Je cherchais un événement qui est tiré une fois lorsque j'entre la fenêtre et une fois quand je quitte la fenêtre de la fenêtre afin que je puisse avoir une superposition de $ propre.fadein () et .fadeout () sur dragenter et dragleave.
Je l'ai résolu avec un élément transparent qui remplit tout la fenêtre. J'appelle ensuite Dragenter sur cet élément transparent au lieu de $ (document). avec $ ('*: visible'). Live (Dragenter ') I Montrez ensuite le caché et la véritable superposition. $ ('# transparentoverlay'). Sur ('DragLeave') cache les superpositions. Jolie hacky mais ça marche (au moins dans Safari / Chrome / Firefox)
Mais juste le sélecteur $ ('*: visible'). Live () me donne un mal de tête ...
Quelqu'un a une meilleure suggestion?
3 Réponses :
Peut-être besoin de voir plus de code / d'erreurs que vous rencontrez. Avez-vous essayé un simple booléen à vérifier lorsque votre événement a tiré et limitez les événements ultérieurs?
var dragging = false;
$(document).on('dragenter', function(){
if(!dragging){
//DO SOMETHING
dragging = true;
}
});
$(document).on('dragleave', function(){
if(dragging){
//DO SOMETHING
dragging = false;
}
});
Essayez-le comme ça, ce qui fonctionne bien pour moi. Essentiellement, il imite les événements dragenter et dragleave , mais uniquement en utilisant dragover :
C'est la seule solution que j'ai trouvée qui a fonctionné parfaitement ... Je ne suis pas sûr que s'il y aura des problèmes avec le seinterval et la fuite de mémoire, mais jusqu'à présent, ses activités fonctionnaient parfaitement.
Quelqu'un a-t-il trouvé une meilleure solution depuis cette période?
Pourquoi avez-vous écrit votre réponse en français en premier lieu? Puis traduisez-le en anglais?
Une solution (légèrement) meilleure, basée sur celle-ci, consiste à activer un Settimeout manutention dans l'événement dragleave . Stockez la valeur de retour de la minuterie et effacez-la sur dragover . J'ai constaté qu'un délai réel n'est même pas nécessaire, car le dragleave et dragover Les événements sont tirés en même temps.
Posté ma version ci-dessous pour clarifier.
Solution génie. L'accélération de l'intervalle d'intervalle m'a aidé à capturer mieux la glisser pour le boîtier de bord dans lequel la souris passait trop vite.
une version plus légère de la réponse ci-dessus:
;(function() {
var dragTimeout;
$(document).on('dragenter', function(e) {
// dragenter code
});
$(document).on('dragleave', function(e) {
dragTimeout = setTimeout(function() {
dragTimeout = undefined;
// your dragleave code
});
});
$(document).on('dragover', function(e) {
if (dragTimeout) {
clearTimeout(dragTimeout);
dragTimeout = undefined;
}
});
})();