Vue.js的拖放组件– vue-dragula

Vue.js的拖放组件– vue-dragula
插件名称 vue-dragula
发布时间 2020年10月15日
插件作者 Astray-git

vue-dragula是dragula库的Vuejs包装器,可为您的Web应用程序添加拖放功能。

变更日志:

v1.3.1(10/14/2020)

  • 更新Dragula库

安装和下载:

npm install vue-dragula
var Vue = require('vue');
var VueDragula = require('vue-dragula');
Vue.use(VueDragula);

用法

模板:

<div class="wrapper">
  <div class="container" v-dragula="colOne" bag="first-bag">
    <!-- with click -->
    <div v-for="text in colOne" @click="onClick">{{text}} [click me]</div>
  </div>
  <div class="container" v-dragula="colTwo" bag="first-bag">
    <div v-for="text in colTwo">{{text}}</div>
  </div>
</div>

注意Vuejs 2.x

为了确保正确更新DOM元素顺序,我们必须在dragula容器内提供keyforv-for指令。https://vuejs.org/v2/guide/list.html#key
使用v-for="item in list",我们需要:key="item.id"对象项:key="item"和纯字符串。