Vue.draggable: Drop into multiple dynamic lists

[marcellopato]

Hello guys!
Thanks for this great job!

I´m trying to drag an item from a list to another like "Trello".
The other lists are dynamic, so I´ll never know the number of lists will be rendered.
Let me try to explain better:

Scenario:

On the left of the screen, there is this list of items for the manager to distribute for the employers. The other part of the screen are lists of employers (which I´ll never know the right amount) so the manager can drag an item to a single employer and save to the data table on droping.

The problem I am facing is that when I drag to one employer, all the employers receive the same item. And the second issue is that I can´t which event I´ll use to trigger the AJAX request to save to the data base.

Let´s see some code:
This image shows what happens when I drag and drop an item to the first guy!

The blade file:

<div class="row" >
          <div class="col-md-12 p20">
          </div>
          <div class="col-md-3  col-sm-3">
            <h5>Leads</h5>
            <ul class="list-group drag p10">
                <draggable class="dragArea"
                           :options="{group:'ITEMS'}"
                           v-model="leads">
                    <li class="list-group-item"
                        v-for="lead, index in leads"
                        :key="lead.no">
                        <span class="badge">No.@{{ lead.id }}</span>
                        <label>
                            @{{ lead.nome }}
                        </label>
                    </li>
                </draggable>
            </ul>
          </div>
          <div class="col-md-3  col-sm-3" v-for="corretor, index in corretores">
          <h5>@{{ corretor.name }}</h5>
              <ul class="list-group drag p10">
                  <draggable class="dragArea"
                             :options="{group:'ITEMS'}"
                             v-model="corretoresComLeads">
                      <li class="list-group-item" v-for="lead, index in corretoresComLeads">
                          <span class="badge">No.@{{ lead.id }}</span>
                        <label>
                            @{{ lead.nome }}
                        </label>
                        <span class="del" v-on:click="deleteItem(lead, index, '2')"><i class="fa fa-times"></i></span>
                      </li>
                  </draggable>
              </ul>
          </div>
        </div>

The script part of the blade file:
````
@section('scripts')

@endsection
```

[David-Desmaisons]

Please address this on stackoverflow as per contributing guideline.

[marcellopato]

How do I do it?

[FerJaraG]

Did someone resolve this?

[arturcesarmelo]

Nobody solved it, even the member @David-Desmaisons . You see this, bro, but i can't image how can you see it and don't help us.

[JimmyTheNerd]

Looks like @David-Desmaisons already answered the question in another thread.

<div v-for="list in lists">
    <draggable v-model="list">
          ......
     </draggable>
<div>

It worked for me.