javascript - example - drag and drop jquery ejemplos
¿Cómo simular HTML5 arrastrar y soltar eventos en javascript? (2)
Puedes probar este. Utiliza eventos HTML5 nativos, no jQuery
Como título, estoy tratando de simular un evento de arrastrar y soltar HTML5 en javascript.
He buscado en jquery.ui.simulate y también la función de simulación here . Parece que ambos se pueden usar para simular el arrastrar y soltar simulando mousedown, mousemove y mouseup, que funciona con los objetos jQuery UI.
Pero los eventos de arrastrar y soltar en páginas como el sitio de demostración de arrastrar y soltar no parecen ser simulables utilizando los mismos métodos. Activar un mousedown no parece disparar el evento HTML5 de dragstart.
¿Hay una manera de conseguir que los eventos de inicio de dragstart se activen en base a una simulación de mousedown / mousemove / etc, o hay una manera de simular los eventos de dragstart (y luego soltarlos) directamente?
He intentado modificar la here para agregar el evento de inicio de dragstart HTML5 para poder probar algo como lo siguiente en la página de demostración
simulate( document.querySelector(''#three''), ''dragstart'')
pero recibo un error porque no estoy seguro de cómo crear el objeto dataTransfer en el evento simulado dragstart.
Básicamente, aceptaré cualquier respuesta que me permita arrastrar el elemento ''tres'' al elemento ''bin'' en la página de arrastrar y soltar de la demostración, ya sea utilizando jquery.ui.simluate (u otra biblioteca) o usando una versión modificada de here que encontré en SO.
Tu mejor apuesta es recrear un objeto de evento falso.
En mi unidad de pruebas para una biblioteca de carga de archivos de arrastrar y soltar ( Droplit , Droplit descarado), he estado haciendo esto con el método de Event de jQuery. En mi código fuente, establezco mi detector de eventos drop con element.ondrop() manera:
element.ondrop = function(e) {
e.preventDefault();
readFiles(e.dataTransfer.files);
};
Y luego puedo probar esto construyendo un objeto de evento falso y pasándolo al método ondrop .
element.ondrop($.Event(''drop'', {dataTransfer: { files: [] }}));