Referencia rápida

La API Drag and Drop introduce eventos específicos, métodos y propiedades para construir aplicaciones que incorporan la capacidad de arrastrar y soltar elementos en pantalla.

Eventos

Existen 7 eventos para esta API:

  • dragstar: este evento es disparado por el elemento origen cuando la operación de arrastre comienza.
  • drag: este evento es disparado por el elemento origen mientras una operación de arrastre se está realizando.
  • dragend: Este evento es disparado por el elemento origen cuando una operación de arrastre es terminada, ya sea porque la acción de soltar fue exitosa o porque la operación de arrastre fue cancelada.
  • dragenter: este evento es disparado por el elemento destino cuando el puntero del ratón entra en el área ocupada por este elemento. Este evento siempre tiene que ser cancelado usando el método preventDefault().
  • dragover: este evento es disparado periódicamente por el elemento destino cuando el puntero del ratón está sobre él. Este evento siempre tiene que ser cancelado usando el método preventDefault().
  • drop: este evento es disparado periódicamente por el elemento destino cuando el puntero del ratón está sobre él. Este evento siempre tiene que ser cancelado usando el método preventDefault().
  • dragleave: este evento es disparado por el elemento destino cuando el puntero del ratón
    sale del área ocupada por el mismo.

Métodos

La siguiente es una lista de los métodos más importantes incorporados por esta API:

  • setData(tipo): este método es usado para preparar los datos a ser enviados cuando el evento dragstart es disparado. El atributo tipo puede ser cualquier tipo de datos regular (como text/plain o text/html) o un tipo de datos personalizado.
  • getData(tipo): este método retorna los datos del tipo especificado. Es usado cuando un evento drop es disparado.
  • clearData(type): este método remueve los datos del tipo especificado.
  • setDragImage(elemento, x, y): este método reemplaza la imagen en miniatura creada por el navegador en la operación arrastrar y soltar por una imagen personalizada. También declara la posición que esta imagen tendrá con respecto al puntero del ratón.

Propiedades

El objeto dataTransfer, que contiene los datos transferidos en una operación arrastrar y soltar, también introduce algunas propiedades útiles:

  • types: esta propiedad retorna un array con todos los tipos establecidos durante el evento dragstart.
  • files: esta propiedad retorna un array con información acerca de los archivos que están siendo arrastrados.
  • dropEffect: esta propiedad retorna el tipo de operación actualmente seleccionada. Los valores posibles son: none, copy, link y move.
  • effectAllowed: esta propiedad retorna los tipos de operación que están permitidos. Puede ser declarada para cambiar las operaciones permitidas. Los posibles valores son: none, copy, copyLink, copyMove, link, linkMove, move, all y uninitialized.