Drag and Drop en Vue en Laravel Inertia
Vamos a conocer como podemos emplear un plugin para reordenar un listado mediante el Drag and Drop.
Vamos a conocer como podemos emplear un plugin para reordenar un listado mediante el Drag and Drop.
La siguiente operación que vamos a aplicar es poder ordenar los todos es decir mediante el drag and poder reordenar para que tengan valga la redundancia otro orden para esto vamos a emplear el siguiente plugin hay más pero este no funciona bastante bien que es del agente o es una variante mejor dicho de sortable js que es un plugin bastante famoso para javascript y en este caso este viene siendo como que el port para Vue viene siendo este simplemente escribimos Drag and Drop next en Vue y sería aquí la siguiente página:
https://github.com/SortableJS/vue.draggable.next
Importante la que dice next al menos a la fecha tienes que chequear eso es para la de Vue 3 tal cual indica por acá la de Vue 2 y un sería esta que tenemos aquí al menos a la fecha se mantiene así y como te indicaba es de la agente de sort js aquí le puedes dar un ojo al plugin en caso de que no lo conozcas que es solamente para javascript bueno por aquí tenemos la instalación y ahorita ya vamos a ver su uso copiamos el Comando e instalamos:
$ npm i -S vuedraggable@next
Y a diferencia de otros plugins, no hay necesidad de configurarlo en la instancia principal de Vue; basta con importarlo como un componente cualquiera:
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
}
</script>
Y usarlo; para usarlo, existen varias configuraciones y cuyo detalle lo puedes ver en la documentación oficial, pero, el uso básico, que consiste en crear una lista que se pueda reordenar via Drag and Drop, tenemos:
<draggable v-model="myArray">
<template #item="{ element }">
<div>
{{ element }}
</div>
</template>
</draggable>
***
data() {
return {
myArray: ["Test", "Test 2", "Test 3", "Test 4"],
};
},
Mediante el componente draggable, indicamos el v-model indicamos la propiedad, que debe ser un array, ya sea de String, como en el ejemplo anterior, o de objetos; no hay necesidad de emplear un v-for para iterar los datos, en su lugar, podemos usar el:
#item="{ element }"
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter
Acepto recibir anuncios de interes sobre este Blog.
!Cursos desde!
4$
En Academia
Ver los cursos!Libros desde!
1$
Ver los libros