In addition I updated cabal and routing files so the example shows up.
How to use:
Navigate to the "Drag and Drop List" example in the examples menu
You'll see a list of items that can be dragged and reordered
Click and drag an item to reposition it in the list
Testing: ( I did this on a fresh clone before creating the PR)
Ensure the example loads correctly
Verify that items can be dragged and dropped
Check that the order updates correctly after drag and drop actions
This example aims to provide a simple demonstration of a drag and drop list, which could be useful for developers looking to implement similar functionality in their own applications. I built this because I needed it in my own app. I ended up spending a lot of time on it but I think the event handling is incredibly useful.
Let me know if you need any further information or if you'd like me to make any changes to this implementation. This is my first contribution but I have adopted reflex as my goto frontend framework and id like to contribute more in the future.
There are a few things to note, first this example wont work on mobile devices because of how click and touch events differ, to fix this on my apps I loaded in a js file that equates touch events to click events. For this example I decided to not include the fix for the sake of clarity.
The other thing to note is I build my apps as standalone frontends to be used with a servant backend, So when converting to this obelisk example I simplified a lot and potentially did something that is not suitable in the obelisk context.
Im looking forward to hearing back and getting any feedback.
This Pull Request adds a new example demonstrating a draggable and reorderable list and is inspired by the Dran n Drop example. The example showcases:
New files added:
In addition I updated cabal and routing files so the example shows up.
How to use:
Testing: ( I did this on a fresh clone before creating the PR)
This example aims to provide a simple demonstration of a drag and drop list, which could be useful for developers looking to implement similar functionality in their own applications. I built this because I needed it in my own app. I ended up spending a lot of time on it but I think the event handling is incredibly useful.
Let me know if you need any further information or if you'd like me to make any changes to this implementation. This is my first contribution but I have adopted reflex as my goto frontend framework and id like to contribute more in the future.
There are a few things to note, first this example wont work on mobile devices because of how click and touch events differ, to fix this on my apps I loaded in a js file that equates touch events to click events. For this example I decided to not include the fix for the sake of clarity.
The other thing to note is I build my apps as standalone frontends to be used with a servant backend, So when converting to this obelisk example I simplified a lot and potentially did something that is not suitable in the obelisk context.
Im looking forward to hearing back and getting any feedback.