Disattivare il trascinamento della selezione sugli elementi HTML?

109

Sto lavorando a un'applicazione web per la quale sto tentando di implementare un sistema di finestre completo di funzionalità. In questo momento sta andando molto bene, sto solo riscontrando un problema minore. A volte, quando trascino una parte della mia applicazione (il più delle volte l'angolo div della mia finestra, che dovrebbe attivare un'operazione di ridimensionamento) il browser web diventa intelligente e pensa che intenda trascinare e rilasciare qualcosa. Risultato finale, la mia azione viene messa in attesa mentre il browser esegue il trascinamento della selezione.

C'è un modo semplice per disabilitare il drag and drop del browser? Idealmente mi piacerebbe poterlo disattivare mentre l'utente fa clic su alcuni elementi, ma riattivarlo in modo che gli utenti possano ancora utilizzare le normali funzionalità del proprio browser sui contenuti delle mie finestre. Sto usando jQuery e, sebbene non sia riuscito a trovarlo sfogliando i documenti, se conosci una soluzione jQuery pura sarebbe eccellente.

In breve: devo disabilitare la selezione del testo del browser e le funzioni di trascinamento della selezione mentre il mio utente ha il pulsante del mouse premuto e ripristinare tale funzionalità quando l'utente rilascia il mouse.

— Nicholas Flynt
fonte

2

Vorrei promuovere che la risposta di @ SyntaxError (sotto, 100+ voti) dovrebbe essere la risposta selezionata, poiché non influisce sulle operazioni di non trascinamento.

— Shaun Wilson

78

Prova a impedire l'impostazione predefinita sull'evento mousedown:

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

o

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

— Sergey Ilinsky
fonte

2

+1 - tuttavia, questo ha lo sfortunato effetto collaterale in Firefox (6.0 e versioni precedenti) in cui impedisce l'applicazione della :activepseudo-classe all'elemento. Ciò significa che non posso davvero usarlo per i miei collegamenti.

— Andy E

3

Scusa, è terribile. Vedi sotto la risposta.

— Madbreaks

216

Questa cosa funziona ..... Provalo.

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

spero che sia d'aiuto. Grazie

— Errore di sintassi
fonte

6

Funziona alla grande! (Gli attributi possono essere inseriti anche su un <div>elemento.)

— VasiliNovikov

4

ha votato per questa risposta. La risposta mousedown IMO è troppo breve (puoi utilizzare l'evento mousedown per altri casi). Questa risposta ha funzionato perfettamente :)

— Daniel van Dommele

4

Questa è davvero una risposta molto migliore, avere 'preventDefault ()' sul mouse in basso ha troppi effetti collaterali (ad esempio, prevenire la messa a fuoco / sfocatura degli input di testo del modulo)

— Jecimi

Questa dovrebbe essere la risposta accettata, poiché non influirà sull'azione del clic.

— rafaelmorais

Questo accoppiato con un copy pasteascoltatore sembra la soluzione perfetta per costringere un utente a digitare l'input piuttosto che incollare / trascinare qualcosa senza influire negativamente su altre parti della pagina.

— Daniel Bonnell

21

Puoi disabilitare il trascinamento semplicemente usando l' draggable="false"attributo.
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
fonte

Funziona a

— meraviglia

1

Questa dovrebbe essere la risposta accettata, non JS, semplice attributo HTML supportato da tutti i browser: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

questa è la risposta migliore

— Argun

12

Questo potrebbe funzionare: puoi disabilitare la selezione con css3 per testo, immagine e praticamente tutto.

.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;
}

Ovviamente solo per i browser più recenti. Per maggiori dettagli controlla:

Come disabilitare l'evidenziazione della selezione del testo utilizzando CSS?

— Tosh
fonte

Grazie mille. Voglio un clic div, ma con il trascinamento disabilitato.

— Ionică Bizău

@ Ionică Bizău Se vuoi rendere le cose cliccabili è meglio usare un pulsante o un tag, poiché alcuni dispositivi senza mouse e touchscreen li riconosceranno e li renderanno selezionabili dagli utenti.

— Tosh

8

Con jQuery sarà qualcosa del genere:

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

Nel mio caso volevo disabilitare l'utente dal drop text negli input quindi ho usato "drop" invece di "mousedown".

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

Invece event.preventDefault () puoi restituire false. Ecco la differenza.

E il codice:

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

— Victor Romano
fonte

2

Questo è un violino che uso sempre con le mie applicazioni Web:

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

Impedirà che qualsiasi cosa sulla tua app venga trascinata e rilasciata. A seconda delle esigenze del tour, è possibile sostituire il selettore del corpo con qualsiasi contenitore che i bambini non devono trascinare.

— lis
fonte

0

prova questo

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

— crazyjune
fonte

0

Per gli inputelementi, questa risposta funziona per me.

L'ho implementato su un componente di input personalizzato in Angular 4, ma penso che potrebbe essere implementato con JS puro.

HTML

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

Definizione dei componenti (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

  disableEvent(event) {
    event.preventDefault();
    return false;
  }
}

— Tito Leiva
fonte

0

usando la risposta di @ SyntaxError, https://stackoverflow.com/a/13745199/5134043

Sono riuscito a farlo in React; l'unico modo in cui ho potuto capirlo era collegare i metodi ondragstart e ondrop a un ref, in questo modo:

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

  return (
    <div ref={panelManagerBody}>

— kriskate
fonte

0

Lo lascerò qui. Mi ha aiutato dopo aver provato di tutto.

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

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

— checknov
fonte

-1

Questo JQuery ha funzionato per me: -

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

— Piyush
fonte