Vue.draggable: No transition when using drag n drop

Created on 2 Sep 2017  路  3Comments  路  Source: SortableJS/Vue.Draggable

With the current version, whenever you try to use the drag n drop feature, there is no animation of the elements under the mouse cursor.

On the official demo, List A and List B do have that animation.
The gif shown on the project homepage shows those animations too.

However, under Firefox 56.0b8 nor Chrome 60, no such transition are shown.

I created a screencast to show the problem.

Ideally, I'd like to reproduce what I made before without jquery and with Vue.Draggable!

Most helpful comment

Nevermind, if you add :options="{animation:150}" to the draggable object, the animations are shown. My bad :)

Do you think it's possible to mimic the behavior shown in my codepen (to show a dotted div where the user can drop the element)?
Can you get that animation when moving the <div> horizontally (and not vertically like this in the case here)?

All 3 comments

Nevermind, if you add :options="{animation:150}" to the draggable object, the animations are shown. My bad :)

Do you think it's possible to mimic the behavior shown in my codepen (to show a dotted div where the user can drop the element)?
Can you get that animation when moving the <div> horizontally (and not vertically like this in the case here)?

Hello @AlexandreBonneau , you are correct:options="{animation:150}" is the way to go.
For the other question, you can play around with ghostClass, chosenClass, sortable-chosen and
dragClass properties. If you manage to create an effect similar to your fiddle it will be interesting to post here as a refernce

Unfortunately I did not manage to reproduce that effect..

Was this page helpful?
0 / 5 - 0 ratings

Related issues

AnnaStuehlmeyer picture AnnaStuehlmeyer  路  3Comments

Nrqz picture Nrqz  路  3Comments

iou90 picture iou90  路  3Comments

Leadaxe picture Leadaxe  路  3Comments

Kuohao-wu picture Kuohao-wu  路  3Comments