TLDR: this post will show you how you can add amazing drag and drop capabilities to your Svelte app using svelte-dnd-action. If you've always wante...
For further actions, you may consider blocking this person and/or reporting abuse
Didn't even think of using a library for dnd functionality. Thank you for this article!
I'm looking for a solution for multiple virtual lists (infinite load on scroll) which can be filtered by search input and also be able to drag&drop items between lists. Is there a way for achieve this?
the virtual list aspect is not covered by the lib but i don't see why it won't be compatible with that. same goes for the flitering by search
Thank you! Well I have a repl for this (svelte.dev/repl/c4fc230da62f4f8295...)
however, I'm getting getBoundingClientRect of undefined error when I try to move the for the first time an item, but not sure if the problem is with my code, or should I open an issue for this? :)
sure. feel free to create an issue. please explain what you are trying to acheive (your consider and finalize handlers seems more complex that i would expect)
Great. I will have to build a small drag and drop app soon and I think I will consider svelte. I did not hear much about svelte before your post but first impression is good. Do you have any beginner reading/tutorial that you suggest me to start learning about svelte?
Hi,
Svelte is quite amazing. The official tutorial is really good and I recommend starting there.
May I ask how to synchronize the items list with a store?
I tried naive approach such as
import { ListStore } from "./ListStore"
let items = $ListStore
const handleSortEnd = e => {
items = e.detail.items
ListStore.set(items)
}
but got a bizarre case of double headings in draggable elements
Update: here is full code
github.com/c0dehamster/drag-and-dr...
You should be able to use the store directly and with no problem. Feel free to create a github issue with a Repl link
Thank you, I figured out how to connect to the store, is was actually very easy. Works as intended now
Awesome library and write up for it!
Every example is with hardcoded data, as soon as data comes from an api drag and drop does not work anymore, can you make an example for this?
what do you mean? of course it works. In my company we are using it with data from all kinds of sources all of the time. Feel free to make an issue with an example in github and I could have a look
Sure here a codesanbox with the example. I need to say that I'm new at Svelte coming from React so I'm sure I'm missing something would be awesome if you could take a look, thanks! codesandbox.io/s/svelte-api-dnd-9wzpe PS. the codesanbox is a bit buggy you need to refresh it in order to show the app.
line 30 should be {#each items as todo(todo.id)}
you are iterating over a variable you are not updating in handleSort
thanks