Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add Drag and Drop List example #46

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

l-Shane-l
Copy link

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:

  • Creation of draggable list items
  • Handling of drag and drop events
  • Reordering of items based on drag and drop actions
  • Simple styling of draggable elements

New files added:

  • frontend/src/Frontend/Examples/DragAndDropList/Main.hs
  • frontend/src/Frontend/Examples/DragAndDropList/DragAndDropList.hs

In addition I updated cabal and routing files so the example shows up.

How to use:

  1. Navigate to the "Drag and Drop List" example in the examples menu
  2. You'll see a list of items that can be dragged and reordered
  3. 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.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant