soltar - drag and drop text html5

Controlando la apariencia del efecto de arrastrar y soltar HTML5

Question

¿Hay alguna manera de controlar la apariencia de "lo que estás arrastrando" utilizando las API de arrastrar y soltar de HTML5?

Normalmente, cualquier elemento HTML que se pueda arrastrar es lo que se vuelve semitransparente y sigue el cursor hasta que se detenga / suelte. Me gustaría controlar eso para poder comenzar a arrastrar desde cualquier lugar dentro de un elemento, pero cuando realmente empiezas a arrastrar, solo puedo hacer que una pequeña imagen siga al cursor, exactamente donde está el cursor.

El ejemplo práctico es: una lista de cosas para arrastrar, cada una es una imagen pequeña y un texto para el nombre de la cosa que arrastrarás hacia un lado. Me gustaría poder comenzar a arrastrar en cualquier parte del elemento sobre la imagen o el texto, pero luego solo la imagen sigue su cursor, y directamente debajo del cursor, en lugar de desplazarse desde donde comenzó a arrastrarlo.

Se me ocurren algunas formas de engañarlo (un elemento oculto que aparece donde se encuentra el cursor del mouse, cuando empiezas a arrastrar y es lo que realmente arrastras), o recurrir al arrastrar y soltar clásico de Javascript.

Gracias

Answer 1

De acuerdo con esta pregunta en , no podemos cambiar el estilo del objeto que se puede arrastrar mientras lo arrastramos, pero podemos establecer una imagen de arrastre. Esto hará que aparezca una imagen mientras arrastra el objeto fantasma.

event.dataTransfer.setDragImage(document.getElementById(''div2''),50,50);

Explicación:

en dataTransfer llamamos una función setDragImage() en la que pasamos el ID de la div y damos la posición donde aparecerá la imagen cuando comenzaremos a arrastrarla.

Ver más sobre dataTransfer aquí: Mozilla Developers - DataTransfer

Answer 2

Desafortunadamente, parece que la especificación se creó para favorecer un comportamiento nativo consistente sobre la personalización en el navegador.

Hicimos un montón de investigación y resumimos nuestros hallazgos aquí:

https://www.inkling.com/engineering/native-html5-drag-drop/

Sin embargo, lo largo y lo corto es que, en general, es preferible utilizar un ayudante (como jQuery UI) o rodar el suyo propio si necesita hacer algo sofisticado.

Sin embargo, si realmente desea utilizar el comportamiento nativo y setDragImage () no es adecuado, hay algunas alternativas.

Un enfoque particularmente extravagante podría involucrar el secuestro del renderizador para crear una captura de pantalla (!) Del elemento como le gustaría que fuera el estilo, y luego insertarlo a través de un URI de datos.

Consulte: http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

Un enfoque más sensato sería simplemente posicionar absolutamente un elemento fantasma para seguir el mouse. Pero eso nos lleva a escribir código que reimplementa partes fundamentales del comportamiento de arrastre fuera de la API.

Answer 3

Echa un vistazo a this parte de jQuery UI. Te permite crear fácilmente un fantasma del elemento arrastrado mientras que el original permanece en su ubicación original. También puede especificar un ''ayudante'' personalizado para seguir el cursor.

Answer 4

Creo que .setDragImage(element, x, y); puede ser lo que buscas.

function handleDragStart(e) {
    var dragIcon = document.createElement(''img'');
    dragIcon.src = ''http://...'';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, x, y);
}

this.addEventListener(''dragstart'', handleDragStart, false);

Ejemplo aquí: jsfiddle.net/cnAHv/