question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there a way to have a non-draggable element in the dndzone?

See original GitHub issue

Hello folks, thank you for this amazing library.

I was wondering if there is a way to make a child of dndzone not draggable, check this:

https://svelte.dev/repl/79d20aa7e7264fbbbc9145a3f98a2b87?version=3.22.2

image

The issue is that the <div> enclosing the input and the button is draggable and it’s causing a few issues. Why do I need this? because I’d like to keep the dndzone full height and this “new item” div always at the bottom of the last item.

Regards!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
isaacHagoelcommented, Dec 9, 2021

instead of adding an element in order to control the height (is there any other reason we are adding it there?), can we instead add an option to treat the dropzone as if it is bigger? something like zoneMargins: 0 0 0 100px or whatever (defaults to all zeros). then in the calculations that determine whether the centre of the dragged element is inside we can simply offset the rect coordinates by the given numbers. what do you think?

0reactions
Fedeorlandaucommented, Jan 1, 2022

Hi @isaacHagoel I couldn’t find a way to increase the min-height for it. Sorry.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dragging a draggable element out of a scrollable div - GSAP
- The option will exist to drag elements from the endzone back to the startzone.
Read more >
jquery draggable element no longer draggable after drop
So, it appears that once the item is dragged, the draggable widget calls its own destroy() function which removes any semblance of draggability...
Read more >
draggable - HTML: HyperText Markup Language | MDN
The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser ...
Read more >
React Mouse Events — Clicking, Dragging and Dropping, with ...
onDrag is for when the user is dragging the element. Since it fires continuously (every 350 ms) while the user is dragging, it's...
Read more >
Basic question: How to identify when draggable element is ...
Then on drag start I show the hidden div. When the draggable is over it, I get its ID and if it's a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found