DEV Community

Drag and drop with Svelte using svelte-dnd-action

Isaac Hagoel on May 19, 2020

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...
Collapse
 
rickymed profile image
RickyMed

Didn't even think of using a library for dnd functionality. Thank you for this article!

Collapse
 
nixxdev profile image
Niki

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?

Collapse
 
isaachagoel profile image
Isaac Hagoel

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

Collapse
 
nixxdev profile image
Niki

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? :)

Thread Thread
 
isaachagoel profile image
Isaac Hagoel

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)

Collapse
 
ericchapman profile image
Eric The Coder

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?

Collapse
 
isaachagoel profile image
Isaac Hagoel

Hi,
Svelte is quite amazing. The official tutorial is really good and I recommend starting there.

Collapse
 
c0dehamster profile image
Sergej Smelov • Edited

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

Collapse
 
isaachagoel profile image
Isaac Hagoel

You should be able to use the store directly and with no problem. Feel free to create a github issue with a Repl link

Collapse
 
c0dehamster profile image
Sergej Smelov

Thank you, I figured out how to connect to the store, is was actually very easy. Works as intended now

Collapse
 
lwkchan profile image
Laura Chan

Awesome library and write up for it!

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

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?

Collapse
 
isaachagoel profile image
Isaac Hagoel

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

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • Edited

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.

Thread Thread
 
isaachagoel profile image
Isaac Hagoel

line 30 should be {#each items as todo(todo.id)}
you are iterating over a variable you are not updating in handleSort

Thread Thread
 
ivan_jrmc profile image
Ivan Jeremic

thanks