web-dev-qa-db-fra.com

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. En ce moment, ça va très bien, je n'ai qu'un problème mineur. Parfois, quand je vais faire glisser une partie de mon application (le plus souvent le coin de ma fenêtre, censé déclencher une opération de redimensionnement), le navigateur Web devient intelligent et pense que je veux 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 les fonctionnalités normales de leur navigateur sur le contenu de mes fenêtres. J'utilise jQuery et, bien que je n'ai pas réussi à le trouver dans les docs, si vous connaissez une solution jQuery pure, elle serait excellente.

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é, puis restaurer cette fonctionnalité lorsque l'utilisateur relâche la souris.

javascriptjquerycsswebbrowser-control
91
Nicholas Flynt

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>
64
Sergey Ilinsky

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

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

j'espère que ça aide. Merci

183
SyntaxError

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:

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

13
Tosh

Vous pouvez désactiver le glissement en utilisant simplement l'attribut draggable="false".
http://www.w3schools.com/tags/att_global_draggable.asp

13
icl7126

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;
  });
});
7
Victor Romano

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

J'ai réussi à le faire dans React; la seule façon de comprendre était de joindre les méthodes ondragstart et ondrop à un ref, comme ceci:

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

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

essaye ça

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

Pour les éléments input, 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 JS pur.

HTML

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

Définition de composant (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

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