desde HTML5 es posible arrastrar y soltar elementos HTML dentro de una página HTML. A través de JavaScript event listeners puede decidir qué sucede cuando el usuario arrastra y suelta elementos.
durante arrastrar y soltar los elementos HTML pueden asumir dos roles:
- arrastrable
- Drop target / drop zone.
el elemento arrastrable es el elemento que el Usuario debe ser capaz de arrastrar alrededor de la página HTML y soltar en algún lugar, para que ocurra alguna acción. Esto puede ser uno o más elementos.,
el destino de colocación o zona de colocación es el elemento sobre el que se colocan los elementos arrastrables.
eventos de arrastrar y soltar
para controlar lo que sucede al arrastrar y soltar elementos HTML, debe realizar 3 pasos:
- establezca los elementos HTML en arrastrables.,
- adjuntar oyentes de eventos a los elementos HTML arrastrables
- adjuntar oyentes de eventos a los elementos HTML de destino drop
los eventos y atributos se ilustran aquí:
primero configure el atributo draggable="true" en el elemento(s) HTML para que sea arrastrable.
en segundo lugar, adjunte detectores de eventos en el elemento arrastrable para los eventos dragstart y dragend., Dentro de estos oyentes de eventos Puede implementar lo que sucederá cuando el usuario comience a arrastrar el elemento y cuando finalice el arrastre.
En tercer lugar se adjuntan los oyentes de eventos en el elemento drop target. Los eventos se pueden detectar son: dragenter, dragover, dragleave y drop.
el evento dragenter se activa cuando el usuario arrastra el draggable al destino drop., Este evento solo se activa cuando el elemento arrastrable cambia de estar fuera a estar encima, lo que normalmente está determinado por la posición del cursor del ratón.
una vez que el elemento arrastrable está sobre el objetivo de colocación, el evento dragover se dispara y sigue disparándose mientras el elemento arrastrable se arrastra sobre el objetivo de colocación.
si el usuario arrastra el objeto arrastrable fuera del destino de colocación de nuevo, se dispara el evento dragleave.
si el usuario suelta el objeto arrastrable en el destino de caída, se dispara el evento drop.,
ejemplo de Evento de arrastrar y soltar
Aquí hay un ejemplo con el que puedes jugar. Intente arrastrar el logotipo de HTML5 al destino de colocación y vea qué sucede. Intente soltar la imagen y arrastrarla de nuevo.
dragend:
dragenter:
dragover:
dragleave:
drop:
Arrastre y suelte el Código
echemos un vistazo a cómo manejar los eventos de arrastrar y colocar., Para ver que primero crearemos un elemento <img> que podemos arrastrar. Aquí está el código HTML para eso:
<img src="http://tutorials.jenkov.com/html5/..." draggable="true">
Una vez que tenemos un elemento arrastrable necesitamos un destino drop. Usaré un elemento <div>:
<div style="width: 200px; height: 200px;">Drop here</div>
Una vez que tengamos el elemento arrastrable y el elemento drop target, necesitamos adjuntar los oyentes de eventos., Aquí está el código JavaScript para eso:
el dragStart() llama a la función event.dataTransfer.setData() para establecer los datos que se transfieren al destino drop cuando se suelta el elemento. Cualquier dato que necesite para terminar correctamente la acción de soltar, configúrelo aquí. Se establecen tanto los datos como su tipo mime.
los controladores de eventos dragOver() y drop() ambos llaman a event.preventDefault() y devuelven false. Esto es necesario para que el arrastrar y soltar funcione correctamente., El navegador puede tener un comportamiento predeterminado de arrastrar y soltar que debe deshabilitar para que su código funcione.
Observe también que la función controlador de eventos drop() lee el conjunto de datos en dragStart() a través de la llamada a event.dataTransfer.getData(). Pasa el tipo mime de los datos como parámetro para extraerlos correctamente.
esto es todo lo que se necesita para implementar arrastrar y soltar en HTML5. Sin embargo, puede hacerlo un poco más agradable visualmente, como veremos en la siguiente sección.,
Visual Feedback
puede utilizar las funciones del controlador de eventos de arrastrar y soltar para proporcionar al usuario una retroalimentación visual más explícita.
en primer lugar, puede marcar el elemento que se está arrastrando para que el usuario pueda ver qué elemento está arrastrando. Si varios elementos se ven iguales y todos pueden ser arrastrados, es bueno para el usuario ver cuál está siendo arrastrado. Puede hacerlo en respuesta al evento dragstart. Aquí hay un ejemplo:
una vez que el arrastre termina, queremos eliminar el borde de nuevo, sin embargo., Esto se hace en respuesta al evento dragend. Así es como se hace:
ahora el usuario obtendrá retroalimentación visual que muestra qué elemento está siendo arrastrado.
también queremos mostrar al usuario que es posible soltar el elemento arrastrable cuando se arrastra sobre el destino de soltar. De nuevo cambiaremos el borde del elemento. Vamos a hacerlo en respuesta a la etiqueta dragenter, dragleave y drop eventos., Así es como se hace:
ahora el borde del Destino drop se volverá verde y discontinuo cuando el elemento arrastrable se arrastre sobre él. La frontera será eliminado cuando el elemento draggable es arrastrado de nuevo, o si el elemento se coloca en el destino.
el ejemplo anterior no muestra la función de controlador de eventos dragOver(), pero asegúrese de agregarla para evitar el comportamiento predeterminado del navegador.,
Aquí está el código completo después de que se haya agregado la retroalimentación visual:
El objeto DataTransfer, effectsAllowed, dropEffect y setDragImage ()
puede aumentar la retroalimentación visual dada al usuario durante las acciones de arrastrar y soltar usando el objeto DataTransfer. El objeto DataTransfer tiene 2 atributos y una función que puede usar para este propósito., Estos son:
- effectsAllowed
- dropEffect
- setDragImage()
Usted tiene acceso a la etiqueta DataTransfer objeto en el dragstart y drop objetos de evento. Aquí hay un ejemplo dragstart función de escucha que establece la propiedad effectsAllowed en la propiedad DataTransfer objeto:
la propiedad effectsAllowed es utilizada por los navegadores para cambiar el cursor del ratón para mostrar tipo de acción se realiza al arrastrar y soltar un elemento., Normalmente, el cursor del ratón cambia cuando el elemento arrastrado se encuentra sobre un destino de colocación. No antes. Los valores válidos para la propiedad effectsAllowed son:
- none
- copy
- move
- copyMove
- link
- linkMove
- copyLink
- all
- uninitialized
The dropEffect se supone que muestra al usuario (a través del cursor) lo que sucede cuando el mouse se desplaza sobre un destino de caída, pero en el momento de escribir (feb. 2014) los navegadores parecen ignorar esto., Los valores válidos para la propiedad dropEffect son:
- none
- copy
- link
- move
la función setDragImage(image, x, y) se puede utilizar para configurar la imagen mostrada por el navegador cuando el usuario arrastra un elemento. De forma predeterminada, el navegador muestra una copia semitransparente del elemento original, pero si desea una imagen diferente, puede configurar una imagen diferente utilizando esta función. Las propiedades x y y se pueden usar para establecer desplazamientos de ubicación para la imagen cuando se muestra., De forma predeterminada, la esquina superior izquierda de la imagen de arrastre se encuentra en la punta del puntero del ratón. Al establecer diferentes propiedades x y y puede cambiar esto. Puede usar compensaciones positivas o negativas x y y.
Aquí hay un ejemplo de código que muestra cómo configurar una imagen de arrastre dentro de la función de escucha de eventos dragStart():
Aquí hay un ejemplo que le permite jugar con las diversas configuraciones en el objeto DataTransfer., Intente cambiar el effectsAllowed y arrastre la imagen y vea lo que sucede cuando arrastra el logotipo HTML5 hacia abajo sobre el destino div drop.
Arrastre los Archivos En El Navegador
es posible arrastrar los archivos en el explorador del sistema de archivos, y leer el nombre y el contenido de los archivos arrastrados desde JavaScript. Lo hace a través de la API de archivos HTML5., Aquí hay un oyente de destino drop que detecta el nombre del archivo arrastrado:
var droptarget2 = document.getElementById("droptarget2");droptarget2.addEventListener("drop" , drop , false);function drop(event) { // Files - array of dragged files. var files = event.dataTransfer.files; for(var i= 0; i Notice how the
function does not call the function, but instead accesses the property of the . The property contains a list of the files that were dragged into the browser. To learn how to read these files, consult the HTML5 File API (I will write about it soon). You can read more about how to access the dragged files in my HTML5 file API tutorial.