Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
DaniS0312 opened this issue May 31, 2023 · 4 comments · May be fixed by #544
Open

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

DaniS0312 opened this issue May 31, 2023 · 4 comments · May be fixed by #544

Comments

@DaniS0312
Copy link

DaniS0312 commented May 31, 2023 •
edited
Loading

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:

Screen.Recording.2023-05-31.at.17.33.11.mov

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.

Screenshot 2023-05-31 at 17 37 17

I added this section to pointerAction.js:

pointerAction

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

example_usage
@isaacHagoel
Copy link
Owner

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
Copy link

@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
Copy link
Owner

isaacHagoel commented Sep 25, 2023 via email

@mskocik
Copy link

mskocik commented Feb 16, 2024

@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.

@mskocik mskocik mentioned this issue Feb 16, 2024
Closed
@mskocik mskocik linked a pull request Feb 25, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow add non-draggable element in dropzone container mskocik/svelte-dnd-action
4 participants
@chazzmoney @isaacHagoel @mskocik @DaniS0312