SortableJS / Vue.Draggable

Vue drag-and-drop component based on Sortable.js
https://sortablejs.github.io/Vue.Draggable/
MIT License
20.18k stars 2.9k forks source link

onMove event not firing up #1125

Open H4D3SPH4NT0M opened 2 years ago

H4D3SPH4NT0M commented 2 years ago

I have a issue where the move event is not firing. my plan is to cancel the dragging as soon as the user puts the item in a wrong spot.

On the other hand the onStart and the onEnd are working, is it possible to return false in onEnd and cancel the dragging?

First draggable where the user starts dragging ` <draggable ghostClass="on-drag" @start="onStart" @end="onEnd" :options="{ animation: 300, group: 'bookingDrag', pull: true, push: true, sort: true, }" :move="onMove" @move="onMove" tag="tbody" group="bookingDrag"

Time: {{ item.startTime }}~{{ item.endTime }}
Name: {{ item.name }}
{{ item.event }}

`

end destenation of the b-card

` <draggable @end="onEnd" @click="sort" :options="{ animation: 300, group: 'bookingDrag', pull: true, push: true, sort: true, }" :move="onMove" @move="onMove" group="bookingDrag" ghostClass="on-drag" tag="td" v-for="(time, j) of times" :ref="'slot-' + (j + i * times.length + 1)" :key="time.id" class="bg-light-gray"

`

marktohark commented 2 years ago

<draggable :move="onMove" />

aldo commented 2 years ago

image

The onMove event seems to not be fired while dragging. What if I need the dragged element position (green arrow in the image)? How can I get a reference to the dragged element (and so to its position)?

Luis0Antonio commented 2 years ago

Hi! this is also happening to me, any news?

H4D3SPH4NT0M commented 2 years ago

Hi! this is also happening to me, any news?

I just gave up and build the whole thing myself, luckily HTML5 has a dragging API This will give you more freedom on how you want the interaction to happen between the elements. https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

xiziliang commented 1 year ago

Hi! this is also happening to me, - _ -

xiziliang commented 1 year ago

Hi! this is also happening to me, - _ -

use :move="onMove", dont @move="onMove" :)

Conpeter commented 1 year ago

I have an alternative solution, not use gap or other properties for the space between elements, but use padding and box-sizing: border-box; In this way, all the spaces belong to elements, :move can always be triggered.

lala2333 commented 5 months ago

check whether vuedraggable receive prop: list or value.