ContentEditable DIV - deshabilitar la función de arrastrar y soltar

Es posible deshabilitar la funcionalidad de arrastrar y soltar en elementos que tienen el atributo contentEditable establecido en true.ContentEditable DIV - deshabilitar la función de arrastrar y soltar

Tengo la siguiente página HTML.

<!DOCTYPE html> 
<html><meta charset="utf-8"><head><title>ContentEditable</title></head> 
<body> 
    <div contenteditable="true">This is editable content</div> 
    <span>This is not editable content</span> 
    <img src="bookmark.png" title="Click to do foo" onclick= "foo()"> 
    </span> 
</body> 
</html>

El principal problema que estoy enfrentando es que es posible arrastrar y soltar la imagen en el DIV y se copia (junto con el título y el controlador de clic)

Fuente

2010-06-13 sonofdelphi

interesante, Don No conozco la interfaz de arrastrar y soltar lo suficientemente bien para estar seguro, pero parece que hay algún tipo de error aquí. He modificado ligeramente su código para agregar un controlador para el evento de colocación en el div editable:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>ContentEditable</title> 
</head> 
<body> 
    <div contenteditable="true" ondrop="window.alert('dropped!');return false;">This is editable content</div> 
    <span>This is not editable content</span> 
    <span> 
     <img src="bookmark.png" title="Click to do foo" onclick="foo()"> 
    </span> 
</body> 
</html>

estoy probando en Firefox 3.7 alpha: si arrastro la imagen en la parte central del texto se activa el evento, Recibo una alerta y el return false detiene la caída de la imagen. Sin embargo, si arrastro al comienzo del texto, el evento no se dispara pero la imagen se inserta dentro del div. Eso sí, en Firefox 3.6 y Chromium 6.0 el evento no se dispara en absoluto, así que o he entendido mal completamente cómo funciona o ninguno de ellos funciona lo suficientemente bien ahora como para confiar.

Fuente

2010-06-16 22:07:27 robertc

En Chrome y Firefox, debe cancelar el evento ondragover para que se active el evento ondrag. También recomendaría cancelar los eventos ondragenter y ondragleave solo para estar seguro.

http://jsbin.com/itugu/2

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>ContentEditable</title> 
</head> 
<body> 
    <div contenteditable="true" ondragenter="return false;" ondragleave="return false;" ondragover="return false;" ondrop="window.alert('dropped!');return false;">This is editable content</div> 
    <span>This is not editable content</span> 
    <span> 
     <img src="bookmark.png" title="Click to do foo" onclick="foo()"> 
    </span> 
</body> 
</html>

Este comportamiento no es un error; en la especificación HTML5 dice que ondragover debe cancelarse para que ondrag se active. No tiene ningún sentido hacerlo de esta manera, por lo que espero que lo cambien pronto. Ver http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html

Fuente

2010-06-26 18:58:43 Na7coldwater

El siguiente fragmento evitará que su div recibir arrastró contenido:

jQuery('div').bind('dragover drop', function(event){ 
    event.preventDefault(); 
    return false; 
});

I (and several others) encontrar esta API para ser extraño y contrario a la intuición, pero impide un contenteditable de recibir arrastré contenido en todos los navegadores excepto en IE8 (incluida IE9 beta). Hasta el momento, no puedo evitar que IE8 acepte contenteditable.

Actualizaré esta respuesta si encuentro una manera de hacerlo.

Fuente

2010-10-13 18:49:32 brad

Esto no funciona para FF/Chrome –

trabajaban en Chrome para yo. – user984003

La prevención de dragover no tiene ningún efecto para mí en FF/Chrome @ Mac. Evitando caer tampoco. – Reinmar

¿Sería posible desactivar todos los eventos de mousedown en la imagen?

$('img').on('mousedown', function(){ 
    return false; 
});

Fuente

2013-09-25 14:01:53 Dries

He descubierto que tengo que configurar el dropEffect 'none' para ambos dragenter y dragover para rechazar un lastre. Si no se unen dragenter, el cursor parpadeará cuando el arrastre entra en el elemento, por lo que el código sería:

<div contenteditable="true" ondragenter="event.preventDefault(); event.dataTransfer.dropEffect = 'none'" ondragover="event.preventDefault(); event.dataTransfer.dropEffect = 'none'">This is editable content</div> 
 
<span>This is not editable content</span> 
 
<img src="bookmark.png" title="Click to do foo" onclick= "foo()">

Fuente

2015-04-02 07:29:49

ContentEditable DIV - deshabilitar la función de arrastrar y soltar

Respuesta

Cuestiones relacionadas