Arrag y caída son una característica común, es decir, arrastrar a otra posición después del objeto de captura. En HTML5, los usuarios pueden usar un mouse para seleccionar un elemento de arrastre, arrastrar el elemento a un elemento colocable y poner el botón del mouse en estos elementos. Durante la operación de arrastre, el semi -transparente que indica el puntero del mouse se puede arrastrar.
Si esperamos que el elemento pueda ser arrastrado, entonces necesitamos establecer su propiedad arrastrable en True (una etiqueta dragable por valor predeterminado es verdadero))))
Evento de arrastrar y soltarVarios eventos se activarán en diferentes etapas de la operación de arrastrar y soltar, y el atributo DataTransfer del incidente de arrastrar y arrastrar deberá almacenar los datos relevantes en la operación de arrastrar y soltar.
| Arrastrar | Activo para [Elemento de origen], cuando un elemento comienza a arrastrarse, el elemento arrastrado del usuario requiere un evento de arrastre adicional. En este incidente, el oyente configurará información relacionada con este arrastre, como arrastrar datos e imágenes. |
| Dragenter | Activo para [elemento fuente], se desencadena cuando el mouse en el arrastre a un elemento. El oyente de este incidente debe indicar si el mouse puede ser liberado en esta área. Si el oyente no está configurado o el oyente no está operado, no se permite que se lance de forma predeterminada. |
| dragaver | Activo en [elemento objetivo], se desencadena cuando el mouse se movió por un arrastre. |
| dragleave | Activo en [elemento objetivo], se desencadena cuando el mouse sale del elemento en el arrastre. Se puede usar como una marca destacada o de inserción que se puede lanzar. |
| Arrastrar | Activo para [Elemento de origen], el evento se activa cuando el elemento se arrastra. |
| gota | Se activa para [Elemento de destino], se desencadena en el elemento de liberación cuando la liberación de la liberación de la operación de arrastre. |
| dragnd | Activo para [Elemento de fuente], la fuente de arrastre se activa al final de la operación de arrastre, independientemente de si la operación es exitosa. |
(Al arrastrar, solo activará los eventos relacionados con el arrastre, los eventos del mouse, como MouseMove, que no se activarán)
Objeto dataTransferAl procesar la operación de arrastrar y soltar, debemos usar el objeto DataTransfer para guardar los datos arrastrados. DataTransfer puede guardar uno o más datos, uno o más tipos de datos.
propiedad
| Dropeffect | Dropeffect [Cadena] Especifique el efecto de colocación real, posible valor: Copiar: Copiar a una nueva posición Mover: moverse a una nueva posición Enlace: cree un enlace de una fuente a una nueva posición Ninguno: prohibido colocar (sin operación) |
| efectivo | [Cadena] Especifique el efecto permitido al arrastrar, valores posibles: Copiar: Copiar a una nueva posición. Mover: moverse a una nueva posición. Enlace: cree un enlace desde una fuente a una nueva ubicación. Copylink: Permitir copia o enlace. CopyMove: Permitir copiar o moverse. LinkMove: Permitir enlaces o moverse. Todos: Permitir todas las operaciones. Ninguno: prohibido todas las operaciones. Uninicializado: el valor predeterminado (valor predeterminado) es equivalente a todos. |
| Archivos | Contiene una lista de archivos locales disponibles en la transmisión de datos. Si la operación de arrastre no involucra el archivo de arrastre, este atributo es una lista vacía. |
| tipos | Guarde una lista de tipos de datos de almacenamiento como el primer elemento, el pedido es consistente con el orden de agregar datos. Si no se agregan datos, se devolverá una lista vacía. |
método
| Vacío Addelement (elemento elemento) | Establezca la fuente de arrastre. Por lo general, no hay necesidad de cambiar esto. El objetivo predeterminado es ser nodos arrastrados |
| Void ClearData (tipo de cadena) | Eliminar datos asociados con un tipo dado. Los parámetros de tipo son opcionales. Si el tipo está vacío o no especificado, elimine todos los tipos de datos asociados. Si no hay un tipo especificado de datos o transmisión de datos no contiene datos, este método no tendrá ningún efecto. |
| String getData (tipo de cadena) | Obteniendo un tipo de datos dado, si los datos del tipo dado no existen o los datos se almacenan sin contener datos, el método devolverá una cadena vacía. |
| void setData (tipo de cadena, datos de cadena) | Establezca datos para un tipo dado. Si el tipo de datos no existe, se agregará al final, y el último proyecto en esta lista de tipos será un formato nuevo. Si ya existe, reemplace los datos existentes en la misma posición. Es decir, cuando se reemplaza el mismo tipo de datos, el orden de la lista de tipos no se cambiará. |
| Vacío SetDragImage (Imagen de dominio, Long X, Long Y) | Personaliza una imagen de un arrastre esperado. En la mayoría de los casos, este elemento no es necesario establecer, porque el nodo arrastrado se crea como la imagen predeterminada. La imagen debe usarse como un elemento de imagen de retroalimentación de arrastre El desplazamiento horizontal en la imagen x. El desplazamiento vertical en la estatua y. |
Soporte del navegador
Internet Explorer 9+, Firefox, Opera 12, Chrome y Safari 5+
Código de demostración
<! ; Solid #CCCCFF; > </div> <div class = bin> & nbsp; '. E.Datatransfer.Effectallowed = 'Move'; verdadero; El elemento de arrastre ingresa al elemento objetivo bin.ondragover = function (e) {e.preentDefault (); '; función (e) {if (drag) {drag.ParentNode.RemoVeChild (drag); Función (e) {e.preventDefault ();Lo anterior es la introducción de la información relacionada con la resistencia y la caída en HTML5.