Feature Request: Option to Swap Only Initial and Final Positions

[Danivalldo]

Hello,

Firstly, I'd like to thank you for developing and maintaining this fantastic library. It has significantly simplified the implementation of drag-to-swap functionality in my projects.

Issue:

Currently, the library moves every element between the initial and final positions when an element is dragged and dropped. However, in my use case, I need an option to swap only the initial and final positions, without affecting the intermediate elements. This feature would provide greater flexibility and control over the layout behavior during drag-and-drop operations.

Example:

Here's an illustration of the current behavior and the desired behavior:

Current Behavior:

Initial: [A, B, C, D, E]
Drag 'A' to position of 'D'
Result: [B, C, D, A, E]
Desired Behavior:

Initial: [A, B, C, D, E]
Drag 'A' to position of 'D'
Result: [D, B, C, A, E]
Proposal:

I propose adding an option or method to enable swapping only the initial and final positions of the dragged element. This could be a configuration setting or a specific method call.

Benefits:

Enhanced flexibility for different use cases.
Greater control over the layout behavior during drag-and-drop.
More intuitive behavior for certain user interfaces.
Additional Context:

If needed, I can assist with testing the new feature or providing further examples of how this functionality could be utilized.

Thank you for considering this feature request. I look forward to your response and am hopeful that this can be incorporated into the library.

Best regards,

Danivalldo

[TahaSh]

@Danivalldo Thank you! I'm really glad to hear you found it helpful. The library should behave as described in your "Desired Behavior" by only swapping the two elements without affecting others. However, if the cursor hovers over other elements while dragging, it will also swap them, which results in the "Current Behavior." Could you please test and confirm if that's the case? Thanks!

[Danivalldo]

Hello,

Thank you for the quick response and the clarification. I tested the library again as per your instructions. Here are my observations:

Test Setup:

Initial setup: [A, B, C, D, E]
Drag 'A' to the position of 'D'

Steps Taken:
Dragged 'A' directly to the position of 'D' without hovering over any intermediate elements.
Dragged 'A' to the position of 'D' while intentionally hovering over 'B' and 'C'.

Results:

When dragging directly to 'D', the library swaps only 'A' and 'D' as expected: [D, B, C, A, E].
When dragging and hovering over 'B' and 'C', the library moves 'A' through the intermediate positions, resulting in: [B, C, D, A, E].
It appears that the second behavior is triggered when the cursor hovers over other elements during the drag. This is consistent with what you described.

Feedback:
The current behavior makes sense given the implementation, but it can be challenging to avoid hovering over intermediate elements in some layouts. A possible improvement could be to add an option to disable swapping during hover or to lock the swap behavior strictly to the initial and final positions, regardless of intermediate hover actions.

Please let me know if there's anything specific you would like me to test further or if additional details are needed.

Thank you for your support and the great work on this library!

[TahaSh]

@Danivalldo Thank you for testing! Two solutions come to mind:

1. Only swap after the user stops the cursor at a specific slot. I'll detect this based on the cursor's motion.
2. Allow the developer to specify a drop target within the slot. This way, even if the cursor is on the slot, it won't swap until it's hovering over the target.

I think both options could be useful in different scenarios. I'll need to do some testing to ensure they provide a good user experience. I'll let you know when something is ready! Thanks!

[Danivalldo]

Thank you for considering these solutions! Both ideas sound great and could be very useful. I appreciate your efforts to improve the library. Looking forward to testing the updates when they are ready!

[TahaSh]

@Danivalldo I've added a new config option in v0.1.0 called continuousMode. If you disable it, the swapping will only happen if the user stops the cursor. You can disable it like this:

createSwapy(container, { continuousMode: false })

Let me know if you have any questions!

[Danivalldo]

Hello,

Thank you for the update! I’ve tested the continuousMode option, and it works perfectly in my project. I appreciate your quick implementation of this feature.

Best regards,

[TahaSh]

@Danivalldo Really glad to hear that! Thanks!