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

109

Je travaille sur une application Web pour laquelle j'essaye d'implémenter un système de fenêtrage complet. En ce moment, ça se passe très bien, je ne rencontre qu'un seul problème mineur. Parfois, lorsque 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 glisser-déposer.

Existe-t-il un moyen simple de désactiver le glisser-déposer du navigateur? J'aimerais idéalement pouvoir le désactiver 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 même si je n'ai pas pu le trouver en parcourant la documentation, si vous connaissez une solution jQuery pure, ce serait excellent.

En bref: je dois désactiver la sélection de texte du navigateur et les fonctions de glisser-déposer lorsque mon utilisateur a le bouton de la souris enfoncé, et restaurer cette fonctionnalité lorsque l'utilisateur relâche la souris.

javascript jquery css webbrowser-control Nicolas Flynt
la source
2
Je recommanderais que la réponse de @ SyntaxError (ci-dessous, plus de 100 votes) soit la réponse sélectionnée, car elle n'affecte pas les opérations sans glisser.
Shaun Wilson

Réponses:

78

Essayez d'empêcher l'événement par défaut sur mousedown:

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

ou

<div onmousedown="return false">asd</div>
Sergey Ilinsky
la source
2
+1 - cependant, cela a un effet secondaire malheureux dans Firefox (6.0 et inférieur) où cela empêche la :activepseudo-classe d'être appliquée à l'élément. Cela signifie que je ne peux pas vraiment l'utiliser pour mes liens.
Andy E
3
Désolé, c'est terrible. Voir la réponse ci-dessous.
Madbreaks
216

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

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

J'espère que ça aide. Merci

Erreur de syntaxe
la source
6
Fonctionne très bien! (Les attributs peuvent également être placés sur un <div>élément.)
VasiliNovikov
4
a voté pour cette réponse. La réponse mousedown IMO est trop courte (vous pouvez utiliser l'événement mousedown pour d'autres cas). Cette réponse a parfaitement fonctionné :)
Daniel van Dommele
4
C'est en effet une bien meilleure réponse, avoir 'preventDefault ()' sur la souris enfoncée a trop d'effets secondaires (par exemple, empêcher la mise au point / flou des entrées de texte de formulaire)
Jecimi
Cela devrait être la réponse acceptée, car cela n'affectera pas l'action de clic.
rafaelmorais
Ceci, associé à un copy pasteauditeur, semble être la solution parfaite pour forcer un utilisateur à taper l'entrée plutôt que de coller / glisser quelque chose sans affecter les autres parties de la page.
Daniel Bonnell
12

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 uniquement pour les nouveaux navigateurs. Pour plus de détails, consultez:

Comment désactiver la mise en évidence de la sélection de texte à l'aide de CSS?

Tosh
la source
Merci beaucoup. Je veux un clic div, mais avec le glisser désactivé.
Ionică Bizău
@ Ionică Bizău Si vous voulez rendre les choses cliquables, il est préférable d'utiliser un bouton ou une balise, car certains appareils sans souris ni écran tactile les reconnaîtront et les rendront sélectionnables pour les utilisateurs.
Tosh
8

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 déposer du texte dans les entrées, j'ai donc utilisé "drop" au lieu de "mousedown".

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

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

Et le code:

$(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});
Victor Romano
la source
2

C'est un violon que j'utilise toujours avec mes applications Web:

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

Cela empêchera tout élément de votre application d'être glissé et déposé. En fonction des besoins de la visite, vous pouvez remplacer le sélecteur de corps par n'importe quel conteneur que les enfants ne doivent pas faire glisser.

Lis
la source
0

essaye ça

$('#id').on('mousedown', function(event){
    event.preventDefault();
}
crazyjune
la source
0

Pour les inputéléments, cette réponse fonctionne pour moi.

Je l'ai implémenté sur un composant d'entrée personnalisé dans Angular 4, mais je pense qu'il pourrait être implémenté avec du JS pur.

HTML

<input type="text" [(ngModel)]="value" (ondragenter)="disableEvent($event)" 
(dragover)="disableEvent($event)" (ondrop)="disableEvent($event)"/>

Définition des composants (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}
Tito Leiva
la source
0

en utilisant la réponse de @ SyntaxError, https://stackoverflow.com/a/13745199/5134043

J'ai réussi à faire cela dans React; la seule façon dont je pouvais comprendre était d'attacher les méthodes ondragstart et ondrop à une référence, comme ceci:

  const panelManagerBody = React.createRef<HTMLDivElement>();
  useEffect(() => {
    if (panelManagerBody.current) {
      panelManagerBody.current.ondragstart = () => false;
      panelManagerBody.current.ondrop = () => false;
    }
  }, [panelManagerBody]);

  return (
    <div ref={panelManagerBody}>
kriskate
la source
0

Je vais juste le laisser ici. M'a aidé après avoir tout essayé.

   $(document.body).bind("dragover", function(e) {
        e.preventDefault();
        return false;
   });

   $(document.body).bind("drop", function(e){
        e.preventDefault();
        return false;
   });
checknov
la source
-1

Ce JQuery a fonctionné pour moi: - 

$(document).ready(function() {
  $('#con_image').on('mousedown', function(e) {
      e.preventDefault();
  });
});
Piyush
la source