Скачать или смотреть How to Make Each Item in a Vue Draggable List Draggable Individually

Learn how to enable dragging individual items within a draggable list in Vue.js using Vue.Draggable. Simple solutions for effortless item reordering!
---
This video is based on the question https://stackoverflow.com/q/62238137/ asked by the user 'Yahoo' ( https://stackoverflow.com/u/13484913/ ) and on the answer https://stackoverflow.com/a/62240279/ provided by the user 'tony19' ( https://stackoverflow.com/u/6277151/ ) 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: Vue draggable works for whole group but not for each item

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.
---
Allowing Individual Item Dragging in Vue Draggable Lists

Introduction

When working with draggable lists in Vue.js, you may encounter a common issue: you want not just entire groups of items to be draggable, but also the individual items within those groups. This can lead to some confusion if you're not familiar with the structure of your code or how Vue's reactivity works. In this post, we'll dive deep into the problem and present a clear solution for making each item within a group draggable.

Understanding the Problem

In a current setup, the drag-and-drop functionality is working for groups of items, but not for individual items within those groups. Here's a brief look at the original code snippet that accomplishes dragging of groups:

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

The issue arises when you attempt to make each individual player name draggable instead of the entire team. This change would require altering the nested structure to access the correct data, but unfortunately, this leads to an error:

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

This means that the reference to teamfetch is out of scope.

The Solution: Nesting Draggable Components

To achieve both functionalities — dragging groups and dragging the individuals within those groups — you can simply nest a second draggable component within the first one. Here’s how you can do it:

Updated Code:

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

Breaking Down the Solution

Outer Draggable: The outer draggable section still manages the team groups, which allows dragging the entire group as before.

Nested Draggable: A new draggable is introduced for the list of players (teamfetch.Team_player_sessions). This allows for individual dragging of each player’s name.

Proper Scoping: Each v-for correctly handles its data scope, ensuring teamfetch is accessible in the relevant context.

Final Touches

You'd also want to ensure that your data structure in Vue is set up correctly. Here’s an example of how you could initialize your component data:

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

Conclusion

By nesting the draggable components, you can effectively allow users to rearrange both the team groups and individual player names simultaneously. This approach keeps the code organized and ensures each part functions as intended. Now you can create a more interactive user experience in your Vue.js applications!

By implementing these changes, you will be able to enhance your user interface and ensure a seamless experience when it comes to dragging and dropping items in Vue.