Estoy tratando de desarrollar mi propia funcionalidad simple de arrastrar y soltar para un generador de formularios. Tengo una lista de elementos que se representan en un bucle v-for con una propiedad calculada. En onDragStart configuro el estado isDragging. Esto debería alterar la lista en la propiedad calculada e insertar algunas ranuras donde puedo soltar el elemento arrastrado. Pero inmediatamente después de arrastrar un elemento, activa el evento onDragEnd.

Inicialmente me faltaba la propiedad :key, pero agregarla no resolvió el problema. Esperemos que alguien sepa una solución o tenga una idea de lo que está mal.

Aquí hay un enlace al código: https://jsfiddle.net/elrihor/vwb3k6qc/49/

 Vue.createApp({ data() { return { list: [{ id: 'i1', name: 'Apfel', }, { id: 'i2', name: 'Banane', }, { id: 'i3', name: 'Kirsche', }, { id: 'i4', name: 'Orange', }, ], props: { item: { props: { draggable: true, ondragstart: ($event) => { this.startDrag(); }, ondragend: ($event) => { this.endDrag(); }, }, }, slot: { props: { ondrop: ($event) => { $event.preventDefault(); this.onDrop($event); }, ondragover: ($event) => { $event.preventDefault(); } }, }, }, isDragging: false } }, computed: { dragList() { let dragList = this.list; if (this.isDragging) { dragList = dragList.reduce((r, a) => r.concat(a, { type: 'slot', name: 'Slot' }), [{ type: 'slot', name: 'Slot' }]); } dragList = dragList.map((item, index) => { return { ...item, id: !item.id ? 's' + index : item.id, type: item.type == 'slot' ? 'slot' : 'item', }; }); return dragList; } }, methods: { getProps(type) { return this.props[type].props; }, startDrag() { console.log('start'); this.isDragging = true; }, endDrag() { console.log('end'); this.isDragging = false; }, onDrop(e) { console.log('drop'); } } }).mount('#app')