Скачать или смотреть How to Drag Multiple Items at Once and Separately with jQuery UI Sortable

Learn how to efficiently manage dragging of multiple items using jQuery UI Sortable for a seamless user experience and organized interactions in web applications.
---
This video is based on the question https://stackoverflow.com/q/65717702/ asked by the user 'Alopwer' ( https://stackoverflow.com/u/11787903/ ) and on the answer https://stackoverflow.com/a/65718581/ provided by the user 'Oliver Trampleasure' ( https://stackoverflow.com/u/5604852/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to drag multiple items at once and at the same time separately with JqueryUi sortable?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Mastering jQuery UI Sortable: Dragging Multiple Items Simultaneously and Separately

If you're developing a web application that requires drag-and-drop functionality, you may be faced with the challenge of needing to drag multiple items at once, while still allowing for the individual dragging of nested items. This is especially common in applications that manage lists with hierarchical structures. In this guide, we’ll explore how to achieve this functionality using jQuery UI Sortable.

The Problem

You have a structured list where parent items (like sections) contain child items (like sub-sections) that need to behave differently when dragging:

When dragging a parent item, all of its child items should be dragged along.

When dragging a child item, it should move independently of the parent.

This might seem like a straightforward requirement, but implementing it correctly while ensuring that the user experience remains smooth can be tricky. Let’s delve into how you can set this up effectively.

Understanding the Structure

Your HTML Structure

Let’s consider your simplified HTML example that consists of nested lists:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

Step 1: Update Your jQuery UI Sortable Configuration

Here’s how you need to modify your jQuery UI Sortable configuration to achieve the desired dragging behavior. You’ll need to connect your lists, set a cancel option, and define a placeholder:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Adapt Your CSS

To ensure smoother dragging and a better visual presentation, adjust your CSS as follows:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Enhanced HTML Structure

Ensure your HTML structure supports multiple sortable areas without issues. Make sure that nested sortable elements are all designated with the sortable class:

[[See Video to Reveal this Text or Code Snippet]]

Testing Your Solution

Once you have implemented these code snippets, it is crucial to test the interaction:

Drag the parent items (e.g., item-1) to another list and confirm that all child elements are moved together.

Drag child elements (e.g., item-1.1 and item-1.2) independently and verify that they can be moved without affecting the parent.

Conclusion

By establishing a clear structure and using the configuration options in jQuery UI Sortable, you can create a user-friendly drag-and-drop interface that allows for complex interactions with ease. This method not only enhances usability but also contributes to a more organized visual layout in your web applications. Don't hesitate to experiment with different styles and configurations to find what works best for your specific needs!

Feel free to reach out if you have further questions or need additional support in your implementation. Happy coding!