Vue.draggable: Delay for Drag and Drop

[lenzls]

Hello,

since my draggable list is also scrollable this gives some conflicts concerning touch gestures on a tablet.

Because the normal scrolling gesture ('swiping' over the list) is interpreted as a drag gesture. The scrolling currently only works if I either touch in between list items or directly on the scroll bar. Of course this is not wrong behaviour.
But because it is kind of awkward to use, I would like to add some kind of delay for the drag and drop stuff.

I would like to have a situation like this:

• A short 'swipe' over the list should be interpreted as a scrolling gesture
• Touching a listItem for eg 400 milliseconds should drag-and-drop the item

I hope I made my problem clear enough.

Did someone has a solution for that kind of problem?

regards

[David-Desmaisons]

Did you try delay option?

[nickycdk]

Im having the same issue... How would one use the delay option in a vue component?

[nickycdk]

Ahhh, you can add the :options prop to the draggable component, with an object that contains the delay

[David-Desmaisons]

Correct:

<draggable v-model="myArray" :options="{delay:400}" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray">{{element.name}}</div>
</draggable>

[ankitsinghaniyaz]

I tried to use the jsBin example you have. It doesn't work for me. I'm on Firefox desktop.

https://jsbin.com/xizeh/edit?html,js,output

[onx2]

I tried to use the jsBin example you have. It doesn't work for me. I'm on Firefox desktop.

https://jsbin.com/xizeh/edit?html,js,output

Same here but on Chrome desktop.

@David-Desmaisons

Correct:

<draggable v-model="myArray" :options="{delay:400}" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray">{{element.name}}</div>
</draggable>

This seems to break all dragging functionality on Firefox desktop and Chrome desktop. Do you have any recommendations or updated links to docs?

This isn't working for me:

I tried following these directions: https://github.com/SortableJS/Vue.Draggable#all-sortable-options but adding properties to the draggable component directly didn't work.

I have tried v-bind="dragOptions" and it seems to work for some options, such as group, ghostClass, and animation, but delay and delayOnTouchOnly don't work.

[ankitsinghaniyaz]

@onx2 just for your reference, I ended up using another project for this.

https://github.com/kutlugsahin/vue-smooth-dnd

Works really well for me so far.

[onx2]

@ankitsinghaniyaz Thanks for the recommendation 😄

@David-Desmaisons I'd still like to understand if this delay functionality is actually possible or if the docs aren't quite accurate. It isn't a big deal but it does make the project slightly more frustrating to use on touch devices.

[David-Desmaisons]

@onx2 You should check on Sortabls.js repo as vue.draggable only pass this argument to the sortable.js. Best way would be to create an issue there and reference this issue when opening the new one.