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.

Drag handles of a nested container also drag the parent container.

See original GitHub issue

I have a nested container setup where both the parent elements and the child elements use handles. However, the drag handles of the children elements also drag the parent elements around (the first child handle will drag the first parent, while the second child element will drag the second parent element no matter which child container the child element is in).

I looked into the source code, and it looks like the SortableContainer.handleStart fires for both containers and they each search for the closest node with sortableInfo on it, which finds the child element. However, the containers do not check if that node is actually part of its collection.

A quick hack I found that fixes it is to add the manager to the sortableInfo field on the node: node.sortableInfo = { index, collection, manager: this.context.manager };. The handleStart method then checks this against its own manager: if (node.sortableInfo.manager != this.manager) { return; }.

If you want, I can submit a pull request with this, or a related fix. Just let me know!

Issue Analytics

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

github_iconTop GitHub Comments

2reactions
DeadHeadRussellcommented, Jan 17, 2017

@clauderic Hey, sorry I was out of town for a few days. If you haven’t started this yet, I can get it done on Thursday.

0reactions
claudericcommented, Jan 24, 2017

Just released 0.4.10 with this fix! Again, thanks @DeadHeadRussell for taking the time to submit a PR for this ❤️

Read more comments on GitHub >

github_iconTop Results From Across the Web

Use a child element to drag a parent element - Stack Overflow
Show activity on this post. Have an attribute draggable="true" in parent element and draggable="false" in all child elements. Now if you drag ......
Read more >
Building Complex Nested Drag and Drop User Interfaces With ...
Users can also place draggable items (row, column, or component) into the trash bin, and move draggable items to its parent's container ......
Read more >
Lean & Mean Drag and Drop - LMDD
Supports nested structures ('nestable sortables'). Smooth transitions. Auto scroll while dragging. Lightweight (~3.5kb gzipped). No dependencies.
Read more >
Frames in Figma - Figma Help Center
Drag to resize a frame manually. Select the frame in the canvas, or Layers Panel in the left sidebar. Click the handle in...
Read more >
Drag'n'Drop with mouse events - The Modern JavaScript Tutorial
But native Drag Events also have limitations. ... It returns the most nested element on given window-relative coordinates (or null if given ...
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