Vue.draggable: Nesting?

[fourpixels]

I've seen that nested lists are achievable with the regular Sortable like here:

http://jsbin.com/pevuyenatu/edit?html,js,output

But how about doing so with Vue.Draggable?

[David-Desmaisons]

@fourpixels , It is supported, you can nest draggable component using same option as in the example

[fourpixels]

Well, I don't see any kind of a clue for nesting a list into another. All I can see is two separate lists. Can you post a quick example or something?

[David-Desmaisons]

@fourpixels Well, it will all depend on your data model and the scenario you want to adress. If you provide this, I could provide an example

[fourpixels]

Well shouldn't it be dynamic and not strictly bond with data? I mean that's what nesting is about..

Let's say I have this data, that I would like to show and work with:

{
  "tasks": [
    {
      "name": "task 1",
       "tasks": [
         {
           "name": "task 1 - sub task 1",
           "tasks": [
             {
               "name": "task 1 - sub task 1 - sub sub task 1"
             }
           ]
         }
       ]
    },
    {
      "name": "task 2",
      "tasks": [
         {
           "name": "task 2 - sub task 1"
         }
       ]
    },
    {
      "name": "task 3 - no children for now, but might have in the future"
    }
  ]
}

And of course I would love to be able to share all tasks in one list, so that task 2 - sub task 1 can go into task 1 - sub task 1's tasks list, or right next to task 1 - sub task 1 - sub sub task 1.

Hope that helps.

[David-Desmaisons]

@fourpixels , I am not sure I fully understand your comment about data. Sure data will be reshaped by drag-and-drop but "data structure" will definitivelly shape your component

Here is a basic example: https://jsfiddle.net/dede89/v8gme77z/38/
You can tweak it to make the template recursive if you need it.

[fourpixels]

Oh, that's great! :) I'm pretty new to Vue and I couldn't figure it out with the local component that wraps and makes a recursive use of the component. Thanks, that's exactly what I was looking for!

[rtransat]

It's what I need :) (with recursivity but is not hard to implement)

I was wondering if the component support the DnD in other container?
For example I need to clone an element from the List 1 when it is dropped to List 2.
The component can handle something like that?

[michaelgallaghertw]

For posterity, I found the linked jsfiddle above in an inconsistent state, here is one with fixed version dependencies: https://jsfiddle.net/mikeapr4/19vzk17e/

I've also made this recursive to allow multiple levels of nesting.

Good opportunity to say thanks for a great DnD library 👍

[minuwan]

@michaelgallaghertw : Awesome, However, there is an issue in the code, Try nesting each and every till there are no siblings. Last 2 items can't be nested. Which can be solved by removing v-if="el.tasks".

[minuwan]

@michaelgallaghertw : This is the very same with light and understandable colors and styles. However, I found when drag and drop some elements are disappearing. Can you take a look, please ? I have a feeling you will be able to fix/hack it. https://jsfiddle.net/minuwan/Lu8bwg5e/

[michaelgallaghertw]

@minuwan - https://jsfiddle.net/mikeapr4/pxk2rf0z/ ? you need to have tasks array in each entry

[David-Desmaisons]

@michaelgallaghertw Thanks for the updated jsfiddle, Very similar example is now available in the vue.draggable repo:
https://sortablejs.github.io/Vue.Draggable/#/nested-example

[wouterdialogic]

After some tinkering got it working, some random tips:

• make sure the areas are big enough.
• make sure there is enough extra space at the bottom of the screen
• you can add a prop called task_level, and a computed property level_plus_one:

 level_plus_one: function() {
            return this.task_level + 1;
        },

This way you can track how deep you are and style accordingly

• :element isnt used, try to use :tag instead.
• for vue, the proper way to use group is

:group="{ name: 'shared', pull: 'clone'}" 

• :sortable="false" doesnt seem to work at the moment.