Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Connecting Multiple Lists | Advanced Drag and Drop for Multi List and Kanban Boards
SortableJS Drag and Drop Interfaces with JavaScript

bookConnecting Multiple Lists

To create advanced drag-and-drop experiences like kanban boards or task managers, you often need to allow users to move items between multiple lists. SortableJS provides a powerful feature for this scenario: the 'group' option. By using the group setting when initializing SortableJS on each list, you can connect them and enable cross-list dragging. When two or more lists share the same group value, items can be dragged from one list and dropped into another. This approach makes it easy to organize workflows, sort tasks, or manage collections across different categories or columns.

index.html

index.html

style.css

style.css

copy
question mark

What is the main purpose of the 'group' option in SortableJS as described in the explanation?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 1

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

Can you show me an example of how to use the 'group' option with SortableJS?

What other options can I use with SortableJS to customize the drag-and-drop behavior?

How do I prevent certain items from being moved between lists?

bookConnecting Multiple Lists

Glissez pour afficher le menu

To create advanced drag-and-drop experiences like kanban boards or task managers, you often need to allow users to move items between multiple lists. SortableJS provides a powerful feature for this scenario: the 'group' option. By using the group setting when initializing SortableJS on each list, you can connect them and enable cross-list dragging. When two or more lists share the same group value, items can be dragged from one list and dropped into another. This approach makes it easy to organize workflows, sort tasks, or manage collections across different categories or columns.

index.html

index.html

style.css

style.css

copy
question mark

What is the main purpose of the 'group' option in SortableJS as described in the explanation?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 1
some-alt