Désactiver le glisser-déposer sur les éléments HTML?
je travaille sur une application web pour laquelle je tente d'implémenter un système de fenêtrage complet. Pour l'instant, ça va très bien, je n'ai qu'un petit problème. Parfois, quand je vais faire glisser une partie de mon application (le plus souvent le coin div de ma fenêtre, qui est censé déclencher une opération de redimensionnement) le navigateur web devient intelligent et pense que je veux faire glisser et déposer quelque chose. Résultat final, mon action est mise en attente pendant que le navigateur fait son truc glisser-déposer.
Est-il un moyen facile de désactiver le navigateur le glisser-déposer? J'aimerais idéalement pouvoir l'éteindre pendant que l'utilisateur clique sur certains éléments, mais le réactiver afin que les utilisateurs puissent toujours utiliser la fonctionnalité normale de leur navigateur sur le contenu de mes fenêtres. J'utilise jQuery, et bien que je n'ai pas été en mesure de le trouver parcourant les docs, si vous connaissez une solution jQuery pur, ce serait excellent.
en bref: je dois désactiver le texte du navigateur fonctions de sélection et de glisser-déposer pendant que mon Utilisateur a le bouton de la souris vers le bas, et restaurer cette fonctionnalité lorsque l'utilisateur libère la souris.
Merci pour tout conseil, j'ai cherché pendant un certain temps sur ce sans succès.
7 réponses
essayer de prévenir la défaillance sur l'événement de mousedown:
<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>
ou
<div onmousedown="return false">asd</div>
ça marche.....Essayer.
<BODY ondragstart="return false;" ondrop="return false;">
j'espère que ça aidera. Merci
cela pourrait fonctionner: vous pouvez désactiver la sélection avec css3 pour le texte, l'image et essentiellement tout.
.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
bien sûr seulement pour les nouveaux navigateurs. Pour plus de détails, voir:
comment désactiver la mise en surbrillance de la sélection de texte à l'aide de CSS?
vous pouvez désactiver le dragage simplement en utilisant l'attribut draggable="false" .
http://www.w3schools.com/tags/att_global_draggable.asp
avec jQuery ce sera quelque chose comme ça:
$(document).ready(function() {
$('#yourDiv').on('mousedown', function(e) {
e.preventDefault();
});
});
dans mon cas, je voulais désactiver l'utilisateur de drop text dans les entrées donc j'ai utilisé" drop "à la place de"mousedown".
$(document).ready(function() {
$('input').on('drop', function(event) {
event.preventDefault();
});
});
à la place événement.preventDefault() vous pouvez retourner false. voilà la différence.
et le code:
$(document).ready(function() {
$('input').on('drop', function() {
return false;
});
});
essayez cette
$('#id').on('mousedown', function(event){
event.preventDefault();
}
ce JQuery a travaillé pour moi: -
$(document).ready(function() {
$('#con_image').on('mousedown', function(e) {
e.preventDefault();
});
});