Question: custom drop area/increasing size of the drop area

[brunobely]

I'm not exactly sure how to ask this question so I'll lead with an example of the functionality I'd like to achieve. My use case would ideally behave somewhat like Trello's drag-and-drop for cards. In it, each list on the kanban board only takes up as much space as is needed to fit all cards, up to a maximum of the entire height of the screen.

However, it is possible to move a card to a different column by dragging it to any point in the column under a list (if the list isn't as tall as the height of the screen).

Also, only cards can be dragged/reordered, not the list header and footer. I mention this because I thought of just putting the dnd zone higher up in the hierarchy, but then the header and footer of the list are also subject to drag/reorder.

---

GIF of behavior I'm trying to recreate:

[isaacHagoel]

Have you looked at this example?
specifically delete line 29 in Board.svelte

[brunobely]

Yep! That's the main example I was looking at-- what I'm trying to do, though, is (after deleting line 29) allowing the user to drop a card below the column and still have it correctly slot into the column. In the screenshot below, if I dropped item45 exactly where it is, I'd want it to go under "DOING", but it goes back into "TODO":

[isaacHagoel]

The lib decides where the dragged element should be based on where its center is located. If the center enters a dropzone the element would land there. Maybe you can leave some room at the bottom and cheat by offseting the border upwards (or something of that nature)

…

On Thu, Nov 11, 2021, 18:34 Bruno Ely ***@***.***> wrote: Yep! That's the main example I was looking at-- what I'm trying to do, though, is (after deleting line 29) allowing the user to drop a card *below* the column and still have it correctly slot into the column. In the screenshot below, if I dropped item45 exactly where it is, I'd want it to go under "DOING", but it goes back into "TODO": [image: Screen Shot 2021-11-10 at 9 32 01 PM] <https://user-images.githubusercontent.com/4048689/141256895-9e3526c6-4fff-4158-a481-a8166b88dcba.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#327 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC3N5CP6DVUFW6JFYSDULNWZPANCNFSM5HXAFHPA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[brunobely]

Do you know if it's possible to do that while still positioning a button below all the items that sits just below the last item rather than at the very bottom? I think this is the toughest hurdle I'm facing: selectively allowing dragging by item. I think it would be interesting to be able to set one (outer) element as the drag/drop zone and one (inner) element as the container for the draggable items.

[isaacHagoel]

It should be possible to make most of the element except for a thin resize area the drag handle. If u want u can make a REPL with what u r trying to do and i can try to give advice.

…

On Fri, Nov 12, 2021, 17:36 Bruno Ely ***@***.***> wrote: Do you know if it's possible to do that while still positioning a button below all the items that sits just below the last item rather than at the very bottom? I think this is the toughest hurdle I'm facing: selectively allowing dragging by item. I think it would be interesting to be able to set one (outer) element as the drag/drop zone and one (inner) element as the container for the draggable items. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#327 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AE4OZC2IAK5NAHK2O4OCJTLULSYV7ANCNFSM5HXAFHPA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[devghost]

Did anyone get this to work? Having a similar problem, have a REPL here:
https://svelte.dev/repl/3cdfe2d95519407581d9265fba1f6e42?version=3.55.1

Basically, I'd like to be able to drop a card anywhere in the red area (below the cards), even though the area below the blue area at the bottom is outside of the dnd zone.

Reason for this is from a UX perspective, it'll be way easier for the user to move the card (49 in the example) slightly to the right, and it'll get attached at the bottom of the list. Instead of having to move to the right and then all the way up to the top.