Question

我管理不同的团队，以及一列竞争对手。

使用vue-dragula，我可以将竞争对手拖到我想要的团队中，这样做很好。

现在，我需要检测哪些竞争对手被添加到哪个团队，并且每次拖放都会修改myTeam变量。

我在这里写了一个小提琴：

我删除了这些事件，因为它们不适用于小提琴，但它们就像：

Vue.vueDragula.eventBus.$on(
            'drop',
            function (args) {
                ...

            }
        );
        Vue.vueDragula.eventBus.$on(
            'dropModel',
            function (args) {
                ...


            }
        )

我应该如何获得团队ID，以及我移动的竞争对手ID，以便我可以坚持下去？

Answer 1

这是我的小提琴：https://jsfiddle.net/kanlidy/tsofafzq/4/

在您的HTML模板中panel-body部分：

<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>

在wrapper-dragula部分：:competitor="competitor"至: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>

在你的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"));
    })
  }

希望有所帮助。

Vue JS，Drag n drop和Get Ids

1 个答案: