feat(user): implement drag and drop #83
Conversation
There was a problem hiding this comment.
Pull Request Overview
This pull request adds drag-and-drop functionality for rearranging items in the web interface. Key changes include the introduction of drag event handlers in the script, updating the HTML template to include a draggable attribute and a drag handle, and styling adjustments to indicate a dragging element.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| web/script.js | Added the initDragAndDrop function with drag event listeners. |
| web/index.html | Updated the URL template to mark items as draggable and styled the drag handle. |
| }, | ||
| initDragAndDrop() { | ||
| const list = document.querySelector('#urls .list-group'); | ||
|
|
There was a problem hiding this comment.
Consider adding a check to verify that the 'list' element exists before binding drag event listeners, to prevent potential runtime errors if the element is missing.
| if (!list) { | |
| console.warn("Element '#urls .list-group' not found. Drag-and-drop functionality will not be initialized."); | |
| return; | |
| } |
|
|
||
| <template id="template-url"> | ||
| <li class="list-group-item text-truncate fs-3"> | ||
| <li class="list-group-item text-truncate fs-3" draggable="true"> |
There was a problem hiding this comment.
Consider adding ARIA attributes (e.g., aria-grabbed) to this draggable element to improve accessibility for keyboard and assistive technology users.
| <li class="list-group-item text-truncate fs-3" draggable="true"> | |
| <li class="list-group-item text-truncate fs-3" draggable="true" aria-grabbed="false" role="listitem" aria-dropeffect="move"> |
debloper
left a comment
debloper
left a comment
There was a problem hiding this comment.
Looks good to me 👍 thanks!
Will need to test it out on a device before merging the PR.
2 participants
The title says it all I guess. I needed to be able to drag-drop the items in de webinterface, so I've added that in a simple way. Hopefully you can add it to your repo as well so other users can benefit from it.