[feature] drag to the list header

SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.

https://sortablejs.github.io/Sortable/

MIT License

29.65k stars 3.7k forks source link

[feature] drag to the list header #2042

Open vincentcordel opened 3 years ago

vincentcordel commented 3 years ago

Scenario :

list 1 has x items
list 2 has y items
sidebar area shows the list names -> list 1, list 2
content area shows list 1

how to drag an item from list 1 to the sidebar list 2 header ?

[---------][-------------------------] list 1. |. list 1 item 1 list 2. |. list 1 item 2 (drag this item to list 2 on sidebar) list 3 |. list 1 item 3

In other words, instead of showing all items of every list, only one list is shown and it should be possible to drag an item to one of the sidebar list headers (names).

dzero1 commented 3 years ago

Your question is not clear enough. If you want to put item from list 1 to list 2 and vice versa, just use "group" option.

If you want to update list headers, you can simply use js. just go through all the list items and concat its names in each time any item dropped. Try using "onEnd" event. I think thats it.

vincentcordel commented 3 years ago

@dzero1

Yes sorry I wasn't clear.

Imagine a page with a sidebar and a content area.

Sidebar lists all categories (category hasMany projects)
Sidebar categories don't show the projects.
Content shows the projects of the selected category on the sidebar.

What I want to achieve is to drag one project (from the current selected category in the content area) on a new sidebar category So I'm wondering how to attach the project into such a category knowing that the draggable group container is hidden.

dzero1 commented 3 years ago

Ha ha.. Still confusing. Could you wireframe this? try figma or just hand drawing.

vincentcordel commented 3 years ago

@dzero1

dzero1 commented 3 years ago

This is easy. But cannot do it using Sortablejs itself. Also no point of adding feature like this I guess. Check this out. This will help you: https://jsfiddle.net/u0sxd3Lc/3/

Rc85 commented 2 years ago

I'm also looking for something like this, except that category is also sortable. When using @dzero1 demo, pulling product to category will add product to category list. I want to be able to drop the product on top of a category and add to that category's product list. Is this achievable with just this library or do I need something like drop zone as well?