Comments (7)
@Danivalldo Thank you for testing! Two solutions come to mind:
- Only swap after the user stops the cursor at a specific slot. I'll detect this based on the cursor's motion.
- 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!
from swapy.
@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!
from swapy.
@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!
from swapy.
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!
from swapy.
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!
from swapy.
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,
from swapy.
@Danivalldo Really glad to hear that! Thanks!
from swapy.
Related Issues (20)
- docs: Add example with next.js HOT 4
- Deep override HOT 3
- TypeScript issue: createSwapy ~ Argument of type 'Element | null' is not assignable to parameter of type 'Element' HOT 2
- An error occurs when using v-bind in Vue3 HOT 3
- Docs: Add an example in Javascript HOT 3
- Elements added later in a React project cannot be dragged and dropped HOT 4
- Nice HOT 1
- typo on website HOT 1
- Change overflow-x on your website to none HOT 3
- Needs reference documentation HOT 1
- Performance degradation on resize HOT 3
- Secondary drag appears to start from original spot HOT 1
- error on adding new slots
- pure js/html/css example? HOT 1
- Wierd behavior with image item HOT 2
- Question: why do we need two different divs for slot and item HOT 2
- Doesn't work with Safari on MacOS
- Items flickering when using multiple containers HOT 1
- Dynamic slots and items issue HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swapy.