Sortable: How to add delay to onMove

[thezjy]

Problem:

I'm implementing a sortable file and folder list, in which the user can drag a file into a folder. The problem is there is no delay between dragging an item and the sorting animation, as a result when a file is dragged near a folder the folder would just move away.

I read the doc and the source code, there seems no way to do this right now? Shall I add a timeout in the _onDragOver function?

[owen-m1]

@thezjy If you could give a JSBin with what you currently have I could try to come up with a solution

[thezjy]

Thanks for your kindness. Here is the demo.
I'm using React to render but the idea is the same.

[owen-m1]

@thezjy You should be able to listen for a dragenter event on the folder elements and then run the code you want to run. But onMove is also fired before the animation occurs. I am not sure what you want to do when the item is dragged over the folder though.

[thezjy]

@owen-m1 I've updated the demo to implement a "dragging the file into folder" feature.

[owen-m1]

@thezjy I see. So this issue is solved then? Your solution looks good to me.

[thezjy]

@owen-m1 The problem is when I want to drag a file into a folder which is in another row (you can try it), as the file comes near the folder, the sorting animation would move the folder away. How can I add a delay between two item touch and the animation start (pretty much like the behaviour of iOS home screen icons)?

[owen-m1]

@thezjy I think it may be possible using a timeout in the onMove function.... I can try to implement it for you.. but what is wrong with the current solution of using the invertedSwapThreshold?

[thezjy]

@owen-m1 The issue is invertedSwapThreshold seems to only work when dragging in the same row. If I drag a file to a folder which is in another row, the dragenter event for the folder would not fire before it's moved away by the sorting animation.

[owen-m1]

@thezjy I cannot log into CodeSandbox for some reason, so I made a minimal example of what you want in this JSBin: https://jsbin.com/xavacox/edit?js,output

I would recommend setting invertSwap: true in your list just to give it the same effect when swapping with folders... this is because when you swap with the folders after the delay Sortable will automatically use inverted swap because the mouse is already inside the item.

Let me know if this solves your problem.

[thezjy]

@owen-m1 Sorry for this late relay. But your solution works well. Thanks a lot for your help!