Drag and drop to reorder tasks #155

edwardloveall commented 2026年05月07日 21:35:20 +02:00

Previously, reordering tasks was a pain. You had to remove and re-add task to
shift occurrence. This commit makes it much easier by using drag and drop.

The web drag and drop APIs are complex, especially if you want anything fancy.
I'm not trying to cover everything here.

Particularly tricky parts are there are a lot of events to keep track of and
depending on the event, the currentTarget might be the item you're dragging,
or item being "dragged over". There's also a gotcha that to make an element
droppable, you must call event.preventDefault() when it's being dragged over.

Overall, it's worth studying up on how all if it works before diving in too
deep.

I cribbed a lot of info from an onrails.blog tutorial:
https://onrails.blog/2018/03/09/stimulus-js-tutorial-how-do-i-drag-and-drop-items-in-a-list/

Also very useful was the MDN docs on the Drag and Drop API:
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

Previously, reordering tasks was a pain. You had to remove and re-add task to shift occurrence. This commit makes it much easier by using drag and drop. The web drag and drop APIs are _complex_, especially if you want anything fancy. I'm not trying to cover everything here. Particularly tricky parts are there are a lot of events to keep track of and depending on the event, the `currentTarget` might be the item you're dragging, or item being "dragged over". There's also a gotcha that to make an element droppable, you must call `event.preventDefault()` when it's being dragged over. Overall, it's worth studying up on how all if it works before diving in too deep. I cribbed a lot of info from an onrails.blog tutorial: https://onrails.blog/2018/03/09/stimulus-js-tutorial-how-do-i-drag-and-drop-items-in-a-list/ Also very useful was the MDN docs on the Drag and Drop API: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API <video src="/attachments/5ed2ae17-8fdc-43b5-97d8-fa530f76eb4e" width="1035" height="745" controls></video>

edwardloveall commented 2026年05月12日 15:12:36 +02:00

I would be curious if there is a small open source library that would encapsulate drag and drop integration well

I wondered the same thing. I do like deeply understanding what's happening under the hood, but there's obviously a limit. I also don't want to fall completely into the "not invented here" trap. I think if this ends up churning a lot it would be worth grabbing a library.

> I would be curious if there is a small open source library that would encapsulate drag and drop integration well I wondered the same thing. I do like deeply understanding what's happening under the hood, but there's obviously a limit. I also don't want to fall completely into the "not invented here" trap. I think if this ends up churning a lot it would be worth grabbing a library.

edwardloveall commented 2026年05月12日 15:25:06 +02:00

This test is being the bane of my existence. It passes locally most of the time and fails on CI (of course). I'll probably try to re-work it so it's testing less at a time, or make a no-js version which may help.

This test is being the bane of my existence. It passes locally most of the time and fails on CI (of course). I'll probably try to re-work it so it's testing less at a time, or make a no-js version which may help.