Estoy tratando de crear un generador de tarjetas usando Vue arrastrable. Tengo una fila llena de cardElements y estos se pueden arrastrar al generador de tarjetas. El generador de tarjetas es un rectángulo formado por "cubos" individuales de listas. Esto es lo que parece:

Diseño del generador de tarjetas

Aquí está el script para generar la lista de elementos:

 import draggable from 'vuedraggable' export default { name: "clone", display: "Clone", order: 2, components: { draggable }, data() { return { cardElements: [ { name: "Logo", id: 1 }, { name: "Stamp", id: 2 } ], arrA: [] }; }, methods: { log: function(evt) { window.console.log(evt); } } };

Puede ver que los cardElements se representan correctamente desde el script y así es como se representan en el HTML:

 <draggable class="dragArea list-group" :list="cardElements" :group="{ name: 'people', pull: 'clone', put: false }" @change="log"> <div class="list-group-item" v-for="element in cardElements" :key="element.name"> {{ element.name }} </div> </draggable>

Estos son arrastrables y puedo cambiar su orden así:

Orden cambiado de artículos

Cada "cubo" en la tarjeta se declara como una matriz como esta (esto es solo para el espacio superior izquierdo en el generador de tarjetas, cada cuadrado es un número diferente):

 data() { return { cardElements: [ { name: "Logo", id: 1 }, { name: "Stamp", id: 2 } ], arrA: [] }; }

 <draggable class="dragArea list-group" :list="arrA" group="cardItem" @change="log"> <div class="lvl1-1 bucket empty" v-for="element in arrA" :key="element.name"> {{ element.name }} </div> </draggable>

Pero cuando arrastro un elemento de la lista cardElements a la lista arrA , no se mueve y no estoy seguro de por qué. Puedo hacer que funcione en el código de ejemplo proporcionado aquí , pero no cuando lo cambio a mi propio código.