Una implementación de arrastrar y soltar para Vue.js 2

Easy-DnD es una implementación de arrastrar y soltar para Vue.js 2 que usa solo eventos de mouse estándar en lugar de la API de arrastrar y soltar HTML5, que es imposible trabajar con . Piense en ello como una forma de transferir datos de algunos componentes a otros utilizando el mouse o el soporte para copiar / cortar y pegar asistido por mouse. También permite reordenar las listas arrastrando y soltando.

Demos

Estas demostraciones están destinadas a ser bonitas y reflejar ejemplos de la vida real. Para obtener más ejemplos básicos, consulte el manual.

Las siguientes funciones de demostración incluyen reordenación de listas, arrastrar y soltar entre dos listas, imágenes de arrastre personalizadas y comentarios personalizados al insertar nuevos elementos. Utiliza componentes de Vuetify.

cómo comprar criptomonedas en voyager

https://codesandbox.io/s/easy-dnd-demo-9mbij

La siguiente demostración presenta la función de arrastrar y soltar entre una tabla y una lista, imágenes de arrastre personalizadas y un estilo personalizado para las áreas de colocación cuando se permite la colocación. Utiliza componentes de Vuetify.

https://codesandbox.io/s/easy-dnd-demo-2-xnqbz

Manual

Visión general

Hay cuatro componentes: Arrastrar, Soltar, DropMask y DropList.

El componente Arrastrar está destinado a definir un área desde la que se pueden exportar datos. El componente Soltar está destinado a definir un área en la que se pueden importar datos. Los componentes de la gota se pueden anidar formando jerarquías de profundidad arbitraria. El componente DropMask está destinado a crear una isla insensible a arrastrar y soltar encima de un componente Drop. El componente DropList es un tipo especial de componente de colocación que muestra una lista de elementos que permite arrastrar y reordenar.

Eventos

Todos los eventos llevan el estado actual de la operación de arrastre mediante las siguientes propiedades:

• type : el tipo de datos que se transfieren
• data : los datos que se transfieren
• position : la posición actual del cursor del mouse
• top : el componente Drop más importante que se encuentra actualmente bajo el cursor del mouse, si lo hay
• previousTop : para dragenter y dragleave, el valor anterior de top si lo hay
• source : el componente de arrastre donde se originó el arrastre

Los componentes de arrastre emiten los siguientes eventos:

• dragstart : se activa cuando se inicia una operación de arrastre
• dragend : se activa cuando finaliza una operación de arrastre (ya sea con éxito o no)
• cut / copy : se activa cuando una operación de arrastre se completa con éxito en un componente de colocación que requiere que los datos se eliminen / copien

Los componentes de caída emiten los siguientes eventos:

• dragenter : se activa cuando el mouse ingresa a un componente Drop
• dragleave : se activa cuando el mouse deja un componente Drop
• dragover : se activa cuando el mouse se mueve sobre un componente Drop
• drop : se activa cuando se completa una operación de colocación en un componente de colocación

Los componentes DropList emiten los siguientes eventos (además de los emitidos por los componentes Drop):

• insert : se activa cuando se deben insertar datos en la lista (propiedades: type, data y index)
• reorder : se activa cuando es necesario reordenar los datos (propiedades: from, to y apply - aplicar es una función que aplica el reordenamiento requerido a la matriz dada)

Datos

Exportar: los datos que se exportan cuando una operación de arrastre se origina en un componente de arrastre se define mediante su data propiedad.

Importar: cuando una operación de arrastre termina en un componente Drop, su drop se activa el evento y el evento lleva el data para ser importado.

Modos

Un arrastrar y soltar puede ocurrir en varios modos posibles, dependiendo de su efecto sobre el origen del arrastre:

• copy (predeterminado): si la fuente del arrastre no se ve afectada por la operación de arrastre,
• cut : si la fuente del arrastre se eliminará cuando finalice la operación de arrastre.

Los componentes de caída deben declarar qué modo debe activarse cuando se introducen datos en ellos mediante mode propiedad.

Cuando se completa una operación de arrastre en un componente Drop que declara el cut (respectivamente copy) modo, a cut (respectivamente copy) el evento se emite en el componente Drag desde el que se originó la operación de arrastre. Esto le da la oportunidad al entorno del componente Arrastrar para reaccionar a la caída que acaba de suceder, por ejemplo, eliminando los datos que se han eliminado en el caso de cut evento.

Si una operación de arrastre se origina en un componente de arrastre que no declara un oyente para cut evento, luego se prohíbe soltar en un componente Drop que declare el cut modo.

guiño donde comprar

La siguiente demostración ilustra los modos en acción:

https://codesandbox.io/s/example-2-r8n1k

Tipos

Una operación de arrastre mayo tener un tipo. El tipo es una estructura de datos (puede ser una cadena simple) que define el tipo de datos que se transfieren. El tipo de operación de arrastre se define mediante el componente Arrastrar que la inicia utilizando type apuntalar.

Se dice que un componente Drop participa en una operación de arrastre si acepta su tipo (el valor predeterminado es aceptar cualquier tipo). Los tipos que acepta un componente Drop pueden definirse por medio de accepts-type prop (puede ser una cadena, una matriz de cadenas o una función que toma el tipo como parámetro y devuelve un booleano).

En lo que respecta a Easy-DnD, si un componente Drop no acepta el tipo de operación de arrastre actual, se comporta como cualquier otra parte de la página que no sea sensible a la función de arrastrar y soltar. Se ignora durante el arrastre, no se aplican clases especiales de CSS, no se muestran cursores especiales / imágenes de arrastre y no se activan eventos especiales.

La siguiente demostración ilustra el uso de tipos. Hay dos tipos en uso: 'cadena' y 'número'. Los componentes de arrastre que contienen '1' y '2' son de tipo 'número', los que contienen 'a' y 'b' son de tipo 'cadena'. Los dos componentes Drop de la izquierda aceptan números, los de la derecha aceptan cadenas. Cuando arrastra un número / cadena (respectivamente), solo los componentes Drop que aceptan números / cadenas (respectivamente) reaccionan (es decir, se aplican imágenes de arrastre, clases CSS, cursores). Los demás se quedan solos.

https://codesandbox.io/s/example-3-g7io8

Restringir los datos que se pueden soltar

Los componentes de caída pueden restringir los datos que aceptan por medio de accepts-data prop (una función que toma los datos y el tipo como parámetro y devuelve un booleano).

La siguiente demostración define cinco componentes de arrastre que se pueden arrastrar a tres componentes de colocación, uno que acepta números pares, uno que acepta números impares y otro que acepta cualquier número pero los elimina una vez que se completa el arrastre.

https://codesandbox.io/s/easy-dnd-demo-fo078

Cursor del ratón

Si no hay un arrastre en curso, el cursor se convierte en grab cuando el mouse está sobre un componente de arrastre. Si hay un arrastre en curso, el cursor se convierte en grabbing, a menos que esté sobre un componente Soltar que acepte el tipo de la operación de arrastre actual. Luego, se convierte en pointer si el componente Soltar acepta los datos que se están arrastrando, y en not-allowed de lo contrario.

Arrastra la imagen

Durante el arrastre, una imagen puede moverse a lo largo del cursor del mouse. Easy-DnD hace que esta imagen esté siempre encima de todo lo demás.

Los componentes de arrastre proporcionan el drag-image ranura que se puede utilizar para establecer la imagen predeterminada que se muestra durante la operación de arrastre:

• si el espacio no está definido, la imagen es un clon del componente Arrastrar.
• si la ranura está definida y vacía, no hay imagen.
• si la ranura no está vacía, se utiliza un clon de su contenido.

Los componentes Drop y DropList proporcionan drag-image slot (props: data y type) que se puede usar para configurar la imagen que se mostrará cuando el mouse esté sobre ellos, si participa en la operación de arrastre actual (es decir, acepta su tipo):

• si el espacio no está definido, se utiliza la imagen predeterminada establecida por el componente Arrastrar.
• si la ranura está definida y vacía, no hay imagen.
• si la ranura no está vacía, se utiliza un clon de su contenido.

Los componentes DropList además proporcionan el reordering-drag-image slot (prop: item sujeto a reordenamiento) que se comporta de la misma manera que drag-image pero controla la imagen de arrastre que se mostrará durante el reordenamiento de la lista.

La posición de la imagen de arrastre en relación con el cursor del mouse se puede controlar mediante CSS utilizando la propiedad de transformación.

La siguiente demostración ilustra el uso de imágenes de arrastre personalizadas, componentes de colocación anidados y una máscara:

https://codesandbox.io/s/example-4-6h8zy

Clases CSS

A un componente de arrastre se le asigna la clase drag-in cuando el mouse está sobre él y no hay una operación de arrastre en progreso, drag-out de lo contrario. Dependiendo del modo del componente Soltar actualmente bajo el cursor del mouse, al componente Arrastrar de origen también se le asignan las clases drag-mode-copy, drag-mode-cut y drag-mode-reordering.

Durante una operación de arrastre, a los componentes Soltar en la página se les asignan varias clases de CSS:

• para todos los componentes Drop: type-allowed si el componente Soltar acepta el tipo de operación de arrastre, type-forbidden de lo contrario
• para los componentes Drop que participan en la operación de arrastre (es decir, acepta su tipo):
  • drop-in cuando el mouse está sobre uno que se encuentra en primer lugar en la posición actual del mouse (recuerde que los componentes Drop pueden anidarse), drop-out de lo contrario
  • drop-allowed cuando el componente Drop acepta los datos y la fuente del arrastre acepta su modo, drop-forbidden de lo contrario

Componente DropMask

La siguiente demostración ilustra el uso de DropMask:

https://codesandbox.io/s/example-1-ngrlv

puedes mirar twitter sin una cuenta

Componente DropList

El componente DropList es un componente Drop especial, por lo que hereda todos los accesorios y eventos del componente Drop. Se puede usar cuando el resultado de una operación de arrastre es importar datos al componente como un elemento en una lista en un índice específico o para permitir al usuario reordenar una lista de elementos usando arrastrar y soltar.

En comparación con el componente Drop, hay un accesorio más:

• items : la matriz de elementos que se van a representar

En comparación con el componente Drop, hay dos eventos más:

• insert : emitido cuando el usuario coloca datos en DropList. Si no se proporciona un oyente para este evento, no se puede insertar la lista.
• reorder : emitido cuando el usuario reordena la lista. Si no se proporciona un oyente para este evento, la lista no se puede reordenar.

En comparación con el componente Drop, hay tres ranuras más:

• item : utilizado para representar cada elemento de la lista. Tiene dos propiedades, item y reorder. Reordenar es verdadero cuando el artículo es el que está sujeto a reorden. ¡No olvides proporcionar una clave para el contenido de este espacio!
• feedback : utilizado para representar un marcador de posición para mostrar la posición donde se insertaría el nuevo elemento si la operación de arrastre terminara en la posición actual del mouse. Tiene dos propiedades: type y data. ¡No olvides proporcionar una clave para el contenido de este espacio!
• reordering-drag-image : define la imagen de arrastre que se utilizará al reordenar la lista (consulte la sección de imagen de arrastre más arriba).

Las claves de los elementos y los comentarios se utilizan para no permitir la caída si crea duplicados y da lugar a errores.

La siguiente demostración presenta la función de arrastrar y soltar de una lista a otra y reordenar la lista.

https://codesandbox.io/s/droplist-ozs8b

Etiquetas

Los componentes de arrastrar y soltar son compatibles con tag prop que se puede usar para controlar la etiqueta HTML (o el componente Vue) que servirá como raíz de la plantilla. En el caso de etiquetas que son componentes de Vue, todos los accesorios, oyentes y ranuras funcionan como lo harían normalmente.

descarga gratuita de películas full hd 1080p

DragAwareMixin

Hay disponible un mixin para hacer que los componentes sean sensibles a las operaciones de arrastre. Agrega los siguientes campos calculados a los componentes que lo incorporan, reflejando el estado actual del arrastre:

• dragInProgress : verdadero si hay una operación de arrastre en curso, falso en caso contrario
• dragType : el tipo de operación de arrastre actual
• dragData : los datos de la operación de arrastre actual
• dragPosition : la posición actual del mouse en relación con el documento
• dragSource : el componente de arrastre desde el que se originó la operación de arrastre
• dragTop : el componente Drop más importante debajo del mouse, si lo hay

La siguiente demostración muestra información sobre la operación de arrastre actual cuando está en curso:

https://codesandbox.io/s/example-5-j8qo9

Detalles de descarga:

Autor: muy delgado

Demo en vivo: https://codesandbox.io/s/easy-dnd-demo-9mbij

GitHub: https://github.com/rlemaigre/Easy-DnD

#vuejs #javascript # vue-js