Ability to include an element in a dnd zone, without it being draggable (Element-specific dragDisable flag)

[DaniS0312]

I am wondering if there is a proposed way to do this, and if not, what you think of my solution.

I am trying to add elements into the dnd zone that "float" either in the beginning or end of the zone, but do not interact as dnd elements.

I couldn't find a way without having to play around with the entire zone's disableDrag flag.

Here is a video of the expected result:

https://github.com/isaacHagoel/svelte-dnd-action/assets/60684710/348a6151-67c4-4598-b1ae-3254ec577286

The main thing being that you should be able to drag the element anywhere in the whole column, (seemingly outside of the dnd zone, but to do this you have to have the dnd zone be that large) and it should drop into the correct place.

I added this section to pointerAction.js:

This is the implementation code: The KanbanTicket component has a data-disabled="true" attribute set.

[isaacHagoel]

Sorry for the long delay. Normally when someone wants an element right above or below the draggable element the solution is to group all of the draggable items in their own div (the dndzone) and leave the static element out of it. Visually they still look like they are all in the same container. Is this a sufficient solution in this case?

[chazzmoney]

@isaacHagoel I think your suggestion forces people into an HTML structure that may not be prudent.

Specifically, for something like this case, to place something like a '+' button within the same container may not work because the styling of elements is dependent on shared containers (think flex or grid). Placing it in an outer nesting container with the dnd zone inside causes some challenges with standard styling. I would think there would be a way to catch the dragstart event and simply cancel it via prevent default? I suppose that you might need a property to "pin" or "anchor" an element to an end so that it can't be shifted as well.

I think it would be sensible to provide a mechanism to distinguish elements which are not wanted to be draggable.

[isaacHagoel]

It sounds like a can of worms of edge-cases and complexity but I am open to ideas. i am happy to look at more detailed requirements or a PR if you can provide.

On Tue, Sep 26, 2023 at 8:14 AM Charles Dorner @.***> wrote:

@isaacHagoel https://github.com/isaacHagoel I think your suggestion forces people into an HTML structure that may not be prudent.

Specifically, for something like this case, to place something like a '+' button within the same container may not work because the styling of elements is dependent on shared containers (think flex or grid). Placing it in an outer nesting container with the dnd zone inside causes some challenges with standard styling. I would think there would be a way to catch the dragstart event and simply cancel it via prevent default? I suppose that you might need a property to "pin" or "anchor" an element to an end so that it can't be shifted as well.

I think it would be sensible to provide a mechanism to distinguish elements which are not wanted to be draggable.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/452#issuecomment-1734537995, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC4SRPFWL3AFP3TI4MDX4H65RANCNFSM6AAAAAAYVUSD2E . You are receiving this because you were mentioned.Message ID: @.***>

[mskocik]

@isaacHagoel this is completely valid use-case. It was reported in my library as well.

Here is reproduction REPL. In there you are able to drag <input> element, which you shouldn't be. For clarity I added red border to it.

Probably simpler solution would be looking for draggable attribute and if it's false cancel dragging? Didn't dig into source, so I am not sure how easily would that be achievable.