Sortable
Sortable copied to clipboard
SortableJS
[feature] drag to the list header
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).
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.
@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.
Ha ha.. Still confusing. Could you wireframe this? try figma or just hand drawing.
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/
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?
