119 votes

Désactiver le glisser-déposer sur les éléments HTML?

Je travaille sur une application web pour laquelle je suis d'essayer de mettre en œuvre un complet système de fenêtrage. Maintenant il va très bien, je suis seulement en cours d'exécution dans un problème mineur. Parfois, quand je vais pour faire glisser une partie de mon application (le plus souvent au coin de la 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 mis en attente le temps que le navigateur ne son de glisser et de déposer chose.

Est-il un moyen facile de désactiver le navigateur le glisser-déposer? Je serais l'idéal pour être en mesure de l'éteindre pendant que l'utilisateur est cliquer sur certains éléments, mais de le ré-activer, de sorte que les utilisateurs peuvent toujours utiliser leur navigateur normal de la fonctionnalité sur le contenu de mon windows. Je suis à l'aide de jQuery, et bien que je n'étais pas en mesure de trouver de la navigation sur le docs, si vous connaissez un pur jQuery solution ce serait super.

En bref: j'ai besoin de désactiver le navigateur de la sélection de texte et faites-le glisser et déposez-les fonctions alors que mon utilisateur a le bouton de la souris enfoncé, et restaurer la fonctionnalité lorsque l'utilisateur relâche la souris.

Merci pour les conseils, j'ai cherché pendant un certain temps sur ce à pas de chance.

233voto

SyntaxError Points 581

Cette chose fonctionne ..... Essayez-le.

 <BODY ondragstart="return false;" ondrop="return false;">
 

J'espère que ça aide. Merci

85voto

Sergey Ilinsky Points 16803

Essayez de prévenir les événements par défaut sur mousedown:

 <div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>
 

ou

 <div onmousedown="return false">asd</div>
 

12voto

Tosh Points 876

Cela pourrait fonctionner: Vous pouvez désactiver la sélection avec css3 pour le texte, l'image et fondamentalement 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, uniquement pour les nouveaux navigateurs. Pour plus de détails, consultez:

règle css pour désactiver la sélection de texte en surbrillance

10voto

Thomas Points 171

8voto

Victor Romano Points 31

Avec jQuery ce sera quelque chose comme ça:

 $(document).ready(function() {
  $('#yourDiv').on('mousedown', function(e) {
      e.preventDefault();
  });
});
 

Dans mon cas, je voulais empêcher l'utilisateur de déposer du texte dans les entrées, j'ai donc utilisé "déposer" à la place de "mousedown".

 $(document).ready(function() {
  $('input').on('drop', function(event) {
    event.preventDefault();
  });
});
 

Au lieu de cela, event.preventDefault () vous pouvez renvoyer false. Voici la différence.

Et le code:

 $(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});
 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X