[Vuejs]-Vue JS, Drag n drop, and Get Ids

by

2👍

✅

Here is my Fiddle: https://jsfiddle.net/kanlidy/tsofafzq/4/

In your HTML template panel-body part:

<div class="panel-body">
    <div class="container-dragula"
            v-dragula="copyOne" 
            :team-id="team.id"
            bag="third-bag">
        <div v-cloak
                v-for="(competitor, index) in copyOne"
                :team-id="team.id"
                :id="compotitor.id"
                :index="index"
                :key="competitor.id"
        >{{competitor.name}}
        </div>
    </div>
</div>

In your wrapper-dragula part: :competitor="competitor" to :id="competitor.id"

<div class="wrapper-dragula">
    <div class="container-dragula" v-dragula="competitorsArea"
            bag="third-bag">
        <div v-cloak
                v-for="(competitor, index) in competitorsArea"
                :id="competitor.id"
                :index="index"
                :key="competitor.id"
        >{{competitor.name}}
        </div>
    </div>
</div>

In your JS:

  created: function () {
    Vue.vueDragula.eventBus.$on('drop', function (args) {
         alert('teams ID is:'+args[1].parentNode.getAttribute("team-id"));
       alert('competitors ID is: ' + args[1].getAttribute("id"));
    })
  }

Hope helps.

👤toimc

Leave a comment