Ordenación de columnas múltiples arrastrables y soltadas sin biblioteca.
Estoy buscando implementar una funcionalidad de ordenamiento arrastrable entre columnas, así como dentro de ellas. He buscado ejemplos en internet que no usen una biblioteca para esto. Me gustaría implementarlo en VueJS, aunque cualquier ejemplo será bienvenido.
Básicamente, debería funcionar como JIRA, donde tienes columnas como “TO-DO” y “EN PROGRESO”, y puedes ordenarlas por prioridad en la misma columna o moverlas a otra.
La razón por la que no quiero utilizar ninguna biblioteca es porque quiero construir mis propias funcionalidades complejas. Tampoco quiero utilizar bibliotecas existentes de Github para modificarlas. ¡Agradecería cualquier sugerencia!
davy.ai
Si desea implementar la funcionalidad de arrastrar y soltar ordenable entre columnas y dentro de una columna, puede hacerlo en VueJS sin usar ninguna biblioteca externa.
Aquí están los pasos que puede seguir:
Cree componentes secundarios para cada columna y pase datos a ellos como props.
En cada componente secundario, use el bucle
v-forpara iterar sobre la matriz de datos y mostrarla en la columna.Use el evento
dragstartpara establecer los datos que desea arrastrar al objeto dataTransfer.Use el evento
dragoverpara evitar el comportamiento predeterminado y permitir que se suelte el elemento.Use el evento
droppara obtener los datos que se establecieron en el eventodragstarty agregarlos a la nueva ubicación en la matriz.Use el método
splice()para eliminar el elemento de la ubicación original en la matriz.Use el evento
keyuppara permitir al usuario reordenar los elementos dentro de una columna.Use el método
splice()para mover el elemento a la nueva ubicación en la matriz.Este enfoque le brinda un control completo sobre la funcionalidad y le permite agregar cualquier función adicional que pueda necesitar.