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.

Option to leave items in DOM (and position with CSS)

See original GitHub issue

Hi, it appears that svelte-dnd-action removes elements from the DOM after drag, and it is upon the caller to recreate the list using event.detail.items, which is then rerendered by an #each block.

I have a use case with dynamic components and DOM, where I would like to allow rearranging the components, but without altering the DOM or the svelte component tree. I can do this by upating CSS, see this REPL for an example of how I do this with CSS grid.

I think this would work, but the dragged items seem to snap to particular positions (which seems to disappear if I comment out line 31), and on drop there is an error Error: Cannot read property 'parentElement' of undefined.

I know this is maybe not the usecase for your library, but I would greatly appreciate it if this could be worked out!

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
isaacHagoelcommented, Nov 1, 2020

I thinks so. imo, you will be happy that you did long term (it is more idiomatic to how Svelte does things). I will let you know if some other solution pops in my mind.

0reactions
mosheduminercommented, Nov 1, 2020

Hmm, okay, thanks. I didn’t want to pull the state up from the panes, but I guess there is no way around it if I want to use this library.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Layout - The position Property - W3Schools
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
Read more >
position - CSS: Cascading Style Sheets - MDN Web Docs
Relative positioning. Relatively positioned elements are offset a given amount from their normal position within the document, but without the ...
Read more >
How to use the position property in CSS to align elements
An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left ...
Read more >
position - CSS-Tricks
The position property can help you manipulate the location of an element, for example:
Read more >
Fixed position but relative to container - Stack Overflow
For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation...
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