Svelte: Feature: drag and drop support

[mindplay-dk]

I've been thinking for a while about drag-and-drop support.

This would likely be quite difficult and may be too complex of an interaction to make sense as a compile-time/code-generated feature - that is, it may require a run-time library of some sort.

I'm also not sure if all drag-and-drop cases can even be supported by a single feature or run-time, but... Here are some possible features and use-cases to consider:

• Simple drag of elements to targets, such as products to a shopping cart.
• Reordering of arbitrary child-elements, for example list-items in <ul>/<li> structures.
• Moving an item from one parent/list to another.
• Two-way synchronization of array indices between DOM and Array objects.
• Customization of the drag "ghost" image/element under the cursor while dragging.
• Support for horizontal and vertical child-element flows.
• Support for float left/right (mixed horizontal/vertical) child-element flows.
• Visual user-feedback during drag-and-drop operations.

I recently worked with the HTML 5 drag-and-drop API (draggable attribute, etc.) attempting to implement a very complex UI with multiple nested lists, in which child-elements could be dragged in/out from parents, and learned the hard way that this is not what the HTML drag-and-drop API is for, at all.

There are apparently two different classes of drag-and-drop problems: internally in your app, and externally via data-transfer objects - the latter allows you to exchange items with other windows, with the computer's native desktop, etc.

The HTML 5 drag-and-drop API is designed for the latter, and for various reasons is more or less unusable for some drag-and-drop problems - for one, the "ghost" image you're dragging around is an actual image (a bitmap) and not an HTML element, so you may not be able to get the appearance or visual feedback required by your application at all.

Ultimately, after 5 days of trying to make the HTML 5 drag-and-drop API fit the problem, I had to hand-code the drag-and-drop operations from mouse up/down/move events manually, and managed to do so in about half a day - so this is more complicated (four times the amount of code) but much simpler and more flexible than with the HTML 5 drag-and-drop API.

I recap this little story just to get the point across that "internal" drag-and-drop may have very different requirements from the "external" drag-and-drop interactions supported by the HTML 5 drag-and-drop API.

Not sure if it's even possible or meaningful to support all cases of drag-ana-drop with a single declarative approach, or whether declarative drag-and-drop is even a very useful or meaningful feature, since drag-and-drop interactions are so diverse.

Anyways, just putting that out there :-)

[jacwright]

There are existing libraries and implementations that help with drag and drop that we could look at for inspiration. jQuery UI's draggable and droppable (internal), React's react-dnd (external) and react-beautiful-dnd (internal), and cross-framework options like Sortable.

It will be nice to see the ecosystem around Svelte grow. You know it is legit already since there is a bootstrap port to svelte already. 😄

[mindplay-dk]

I have used the jQuery UI draggable/droppable and Sortable.js in the past, and have had to throw them away and code by hand every time. They were all built to a specific set of expectations and use-cases, and tend to fall apart for anything the designer wasn't expecting.

On a few occassions, I've tried to use Sortable, and after a day or so of fighting it, I've written it from scratch in less than an hour. These days I've resigned myself to just coding drag-and-drop operations from scratch by default - I don't feel like there's a library that covers every conceivable use-case, so at this point, I honestly wouldn't recommend any library try to solve this.

I'm withdrawing my request 😄

[paulocoghi]

@mindplay-dk , it seems to me that you have the vision and knowledge to create a sufficiently generic library that can also be used inside svelte applications.

[mindplay-dk]

@paulocoghi I almost replied and posted a function I extracted from a project on friday - but, I can already see this rapidly exploding in scope... it's tempting, but I'm really not convinced it's useful or meaningful to try to generalize a broad class of UI patterns and try to package it as a library...

[mindplay-dk]

@paulocoghi so, er, I said I wouldn't, but... I went ahead anyway 😆

This isn't 100% done, but it's far enough along that it's starting to feel worth while.

I'm not sure what I'm doing with this yet...

[Ryuno-Ki]

Personally, I would do that with dragula. I recently heard it would be well working with accessibility requirements.

[mindplay-dk]

@paulocoghi I am definitely pursuing this - the project is called zero-drag and lives here and here's a demo. I will be publishing the package very soon.

@Ryuno-Ki this is very different from what I've created - I have strong opinions about abstracting only the difficult parts. Dragula implements the effects as well as the interaction, whereas what I've implemented abstracts only the interaction and leaves the effects entirely up to you - one upshot to this approach, is this won't need any bridge or adapters to function in pretty much any context: plain DOM, Svelte, React, jQuery, and so on. (I don't mean this as a criticism of Dragula - it just has a different and much bigger scope from what I've created, and I will definitely list it as an alternative in my own README!)

[mindplay-dk]

I've published several beta-releases by now, and have used this for a couple of different projects.

It is available on npm:

https://www.npmjs.com/package/zero-drag

I haven't attempted to integrate it with svelte yet, as I'm too busy with other projects.

[paulocoghi]

I will surely test it when my next project demands this feature!