¿Deshabilitar arrastrar y soltar en elementos HTML?

109

Estoy trabajando en una aplicación web para la que intento implementar un sistema de ventanas con todas las funciones. En este momento todo va muy bien, solo me encuentro con un problema menor. A veces, cuando voy a arrastrar una parte de mi aplicación (la mayoría de las veces el div de la esquina de mi ventana, que se supone que activa una operación de cambio de tamaño), el navegador web se vuelve inteligente y piensa que quiero arrastrar y soltar algo. El resultado final, mi acción se pone en espera mientras el navegador hace su cosa de arrastrar y soltar.

¿Existe una forma sencilla de desactivar la función de arrastrar y soltar del navegador? Idealmente, me gustaría poder apagarlo mientras el usuario hace clic en ciertos elementos, pero volver a habilitarlo para que los usuarios aún puedan usar la funcionalidad normal de su navegador en el contenido de mis ventanas. Estoy usando jQuery, y aunque no pude encontrarlo navegando en los documentos, si conoce una solución pura de jQuery, sería excelente.

En resumen: necesito deshabilitar la selección de texto del navegador y las funciones de arrastrar y soltar mientras mi usuario tiene el botón del mouse presionado, y restaurar esa funcionalidad cuando el usuario suelta el mouse.

— Nicholas Flynt
fuente

2

Promocionaría que la respuesta de @ SyntaxError (a continuación, más de 100 votos) debería ser la respuesta seleccionada, ya que no afecta las operaciones sin arrastre.

— Shaun Wilson

78

Intente evitar el evento predeterminado al mousedown:

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

o

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

— Sergey Ilinsky
fuente

2

+1: sin embargo, esto tiene el desafortunado efecto secundario en Firefox (6.0 y versiones anteriores) donde evita que la :activepseudoclase se aplique al elemento. Esto significa que realmente no puedo usarlo para mis enlaces.

— Andy E

3

Lo siento, esto es terrible. Vea la respuesta a continuación.

— Madbreaks

216

Esta cosa funciona ... Pruébelo.

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

Espero eso ayude. Gracias

— Error de sintaxis
fuente

6

¡Funciona genial! (Los atributos también se pueden colocar en un <div>elemento)

— VasiliNovikov

4

votó por esta respuesta. La respuesta de mousedown IMO es demasiado corta (puede usar el evento mousedown para otros casos). Esta respuesta funcionó perfectamente bien :)

— Daniel van Dommele

4

De hecho, esta es una respuesta mucho mejor, tener 'preventDefault ()' al presionar el mouse tiene demasiados efectos secundarios (por ejemplo, evitar el enfoque / desenfoque de las entradas de texto del formulario)

— Jecimi

Esta debería ser la respuesta aceptada, ya que esto no afectará la acción de hacer clic.

— rafaelmorais

Esto, junto con un copy pasteoyente, parece la solución perfecta para obligar al usuario a escribir la entrada en lugar de pegar / arrastrar algo sin afectar negativamente a otras partes de la página.

— Daniel Bonnell

21

Puede deshabilitar el arrastre simplemente usando draggable="false"atributo.
http://www.w3schools.com/tags/att_global_draggable.asp

— icl7126
fuente

Funciona como un encanto en Chrome 59

— kashiraja

1

Esta debe ser la respuesta aceptada, no JS, atributo HTML simple que se admite en todos los navegadores: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…

— chris

1

esta es la mejor respuesta

— Argun

12

Esto podría funcionar: puede deshabilitar la selección con css3 para texto, imagen y básicamente todo.

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

Por supuesto, solo para los navegadores más nuevos. Para más detalles, consulte:

¿Cómo deshabilitar el resaltado de selección de texto usando CSS?

— Tosh
fuente

Muchas gracias. Quiero un clic en el que se pueda div, pero con el arrastre desactivado.

— Ionică Bizău

@ Ionică Bizău Si desea hacer que se pueda hacer clic en las cosas, es mejor usar un botón o una etiqueta, ya que ciertos dispositivos sin mouse y pantallas táctiles los reconocerán y los harán seleccionables para los usuarios.

— Tosh

8

Con jQuery será algo así:

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

En mi caso, quería deshabilitar al usuario para que no soltara texto en las entradas, así que usé "soltar" en lugar de "mousedown".

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

En su lugar event.preventDefault () puede devolver falso. Esta es la diferencia.

Y el codigo:

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

— Víctor Romano
fuente

2

Este es un violín que siempre uso con mis aplicaciones web:

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

Evitará que se arrastre y suelte cualquier cosa en su aplicación. Dependiendo de las necesidades del recorrido, puede reemplazar el selector de cuerpo con cualquier contenedor que los niños no deben arrastrar.

— Lis
fuente

0

prueba esto

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

— crazyjune
fuente

0

Para los inputelementos, esta respuesta me funciona.

Lo implementé en un componente de entrada personalizado en Angular 4, pero creo que podría implementarse con JS puro.

HTML

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

Definición de componente (JS):

export class CustomInputComponent { 

  //component construction and attribute definitions

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

— Tito Leiva
fuente

0

usando la respuesta de @ SyntaxError, https://stackoverflow.com/a/13745199/5134043

Me las arreglé para hacer esto en React; la única forma en que pude averiguarlo fue adjuntar los métodos ondragstart y ondrop a una referencia, así:

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

  return (
    <div ref={panelManagerBody}>

— kriskate
fuente

0

Lo dejaré aquí. Me ayudó después de que probé todo.

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

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

— checknov
fuente

-1

Este JQuery funcionó para mí: -

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

— Piyush
fuente