Je viens de terminer la mise en œuvre d'une fonctionnalité dans laquelle les utilisateurs peuvent faire glisser des fichiers dans le navigateur et déposer lors d'un plugin de téléchargement de fichier de support, qui traite la goutte.
Cependant, afin de Donnez aux utilisateurs un indice qu'ils peuvent même déposer des choses en premier lieu, j'ai implémenté un événement Mais il semble que je Mettre en œuvre ceci, le glissement de la zone cible provoque un scintillement. Être clair: En outre: (Avertissement: le violon est très brut.) Sélectionnez simplement une partie du texte et faites-la glisser sur la boîte bleue et vous verrez ce qui se passe; Ce sera évident le comportement qu'il ne faut pas exposer. Pour être honnête, je n'ai aucune idée de quoi essayer. Il n'y a pas de documentation étendue sur le comportement de J'ai regardé Google Images et Google Contacts pour Leur comportement de glisser-déposer, mais leur code est complètement minifié et illisible, et je ne peux même pas trouver de comportement "glisser" spécifié. Alors, y a-t-il une solution à ce comportement apparemment impair? S'il s'agit d'un bogue dans WebKit, que je soupçonne, y a-t-il une solution de contournement brillante et / ou un hack que je peux utiliser? Merci à tout le monde pour leur temps! dragover pour afficher un div qui dit quelque chose de ressemblant à "déposer ici". Ceci, à son tour, cache le bouton div qui a le bouton "Choisir le fichier ..." et le remplace, jusqu'à ce que l'utilisateur cesse de glisser.
div avec interface "Choisissez le fichier" est affiché.
jsfiddle
code utilisé dans violon
ma solution ...
dragover ou dragleave , et je ne sais même pas pourquoi cela se passe, donc je ne peux même pas commencer à le déboguer. Je me sens comme dragover ne devrait tirer que une fois, mais même glisser autour de l'écran, il suffit de le tirer dessus et encore et encore.
3 Réponses :
Après plus d'une heure de récurage, j'ai trouvé quelqu'un qui avait un type similaire de problème . Il semble que chrome et safari (5, au moins) incendie < Strong> La solution consiste à vérifier si dragleave lors de la saisie d'un élément enfant (et apparemment, sur toute modification de cet élément, y compris les enfants étant représentés / cachés). PageX et page est égal à 0 dans dragleave (mais pas goutte ).
Omg, triple comme. J'ai parcouru Internet pendant des heures pour cela. Merci
Agréable! J'ai seulement changé || && et fonctionne très bien. Merci.
J'ai trouvé qu'avec la solution d'Eric si je me suis enfoncé de l'écran sur Win10 Google Chrome (sur une autre fenêtre) après avoir utilisé cette solution, cela n'a pas fonctionné pour moi. Changer le conditionnel et travaillé à la place.
var $dropTarget = $("#container");
$(document).bind("dragenter", function(e) {
if (e.target == this) {
return;
}
$dropTarget.addClass("highlight");
$dropTarget.find("[name='drop']").show();
$dropTarget.find("[name='drag']").hide();
}).bind("dragleave", function(e) {
if (e.originalEvent.pageX != 0 || e.originalEvent.pageY != 0) {
return false;
}
// Could use .trigger("drop") here.
$dropTarget.removeClass("highlight");
$dropTarget.find("[name='drop']").hide();
$dropTarget.find("[name='drag']").show();
}).bind("drop", function(e) {
$dropTarget.removeClass("highlight");
$dropTarget.find("[name='drop']").hide();
$dropTarget.find("[name='drag']").show();
});​
Vous pouvez sélectionner votre réponse, contrôler la recherche et mettre en surbrillance toute sa réponse. Cela devrait être supprimé - c'est une copie exacte de sa réponse. Si vous croyez qu'il existe une solution conditionnelle, veuillez modifier votre réponse pour refléter cela.
J'ai un projet à l'aide d'un fichier glisser-déposer et j'ai été trouvé le même problème sur mon projet, C'est une solution pour votre problème et testé sur votre cas et c'est du travail 100%
Ceci est le code magique: P>
<style type="text/css">
.drag * {
pointer-events: none;
}
</style>
<div class="drag" id='container'>
<div name='drop' style='display: none;'>DROP HERE</div>
<div name='drag'>DRAG HERE</div>
</div>