¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!
Introducción a js arrastrar y soltar
Node.js proporciona una función Vue.js con diferentes opciones para el usuario, como la función de arrastrar y soltar, en la que transferimos datos de una ubicación a otra, lo que significa arrastrar y soltar. Proporciona una forma interactiva para que el usuario manipule sus datos. Cuando agregamos la funcionalidad de arrastrar y soltar a su proyecto, es una excelente manera de hacer que la aplicación sea natural y fácil de usar. Proporciona diferentes tipos de API a los usuarios para implementar la funcionalidad de arrastrar y soltar, como arrastrar, arrastrar, iniciar, arrastrar, ingresar, arrastrar, dejar, arrastrar y soltar, etc.Para implementar arrastrar y soltar, necesitamos un objeto de transferencia de datos.
Sintaxis
1. Arrastrar
startDrag: (evento, producto)}
{
event.dataTransfer.dropEffect='mover'
event.dataTransfer.effectAllowed='mover'
event.dataTransfer.setData('productID', product.id)
Explicación
En la sintaxis de arrastre anterior, necesitamos almacenar la identificación del producto y estamos arrastrando usando la funcionalidad de transferencia de datos y también mencionamos que aquí se moverá el evento de arrastre.
2. Suelta
onDrop (evento, producto)}
{
Const product_ID=event.dataTransfer.getData('productID')
Const producto=this.product.find(product=product.id==productID)
producto.lista=lista
Explicación
En la sintaxis anterior, recuperamos el ID del producto almacenado para poder acceder a él correctamente.
¿Cómo funciona arrastrar y soltar en Vue.js?
- Debemos instalar Node.js 10.x y superior en su sistema y puede verificar usando el comando node -v en su terminal.
- Debemos instalar la última versión de Vue en su sistema usando el comando npm i -g @vue/cli.
- Luego crea el proyecto usando vue para crear un nombre de proyecto.
- Debemos instalar los paquetes arrastrables en su proyecto usando npm i -S vuedraggable.
- Requerimos conocimientos básicos sobre Node.js.
- Requerimos conocimientos básicos sobre Vue.js y sus componentes.
- Con la ayuda de arrastrar y soltar de Vue.js, realizamos diferentes operaciones.
Antes de pasar a explicar, debemos conocer el evento de arrastrar y soltar de la siguiente manera.
Vue.js proporciona un total de ocho tipos de eventos de arrastrar y soltar en la API y podemos implementarlos en nuestra aplicación.
- Drag: El evento de arrastre se utiliza para arrastrar el elemento.
- dragstart: el evento dragstart se usa para comenzar a arrastrar un elemento arrastrable.
- dragend: El evento dragend se usa para mostrar los extremos del arrastre.
- dragenter: el evento dragenter se usa cuando un elemento arrastrado se ingresa en una zona desplegable.
- dragleave: El evento dragleave se utiliza cuando dejamos un elemento arrastrado.
- dragover: El evento de arrastre que usamos cuando se mueve un elemento arrastrado.
- drop: El evento de soltar se usa cuando soltamos el elemento arrastrado.
- objeto de transferencia de datos: El objeto de transferencia de datos es el objeto más útil en la API de arrastrar y soltar. Este objeto da permiso para comenzar a arrastrar un elemento y acceder a él cuando lo soltamos
Propiedades del objeto de transferencia de datos
- dropEffect: este dropEffect se utiliza para mostrar la operación de arrastrar y soltar en curso.
- effectAllowed: Esto también muestra la operación de arrastrar y soltar.
- setData: Esto se utiliza para agregar valores a los objetos de transferencia de datos.
- getData: Se utiliza para recuperar valores almacenados.
Ejemplo de arrastrar y soltar de Vue.js
Veamos ejemplos de cómo funciona arrastrar y soltar para una mejor comprensión. Primero, creamos un nuevo proyecto con un nombre como dnd en el que creamos dos componentes diferentes de la siguiente manera.
El nombre del primer componente es Table.Vea el código del componente Table de la siguiente manera.
Código:
":id=id
""clase=tabla
"@dragover.prevent
"@drop.prevent=drop
">
¡Ayuda al desarrollo del sitio, compartiendo el artículo con amigos!