vue.draggable中文文档

vue.draggable add 从A组拖动到B组完成的事件

vue.draggable add 从A组拖动到B组完成的事件,当当前网页只有一页时不会触发该事件。

add事件

例子

完整代码

<template>
  <div>
    <!--使用draggable组件-->
    <div class="itxst">
      <div style="padding-left:10px">add事件例子,左边往右边拖动试试看</div>
      <div class="col">
        <draggable v-model="arr1" group="itxst" @add="add1" animation="300">
          <transition-group>
            <div
              :class="item.id==1?'item forbid':'item'"
              v-for="item in arr1"
              :key="item.id"
            >{{item.name}}</div>
          </transition-group>
        </draggable>
      </div>
      <div class="col">
        <draggable v-model="arr2" group="itxst" @add="add2" animation="300">
          <transition-group>
            <div
              :class="item.id==12?'item2 forbid':'item2'"
              v-for="item in arr2"
              :key="item.id"
            >{{item.name}}</div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable
  },
  data() {
    return {
      //定义要被拖拽对象的数组
      arr1: [
        { id: 1, name: "www.itxst.com" },
        { id: 2, name: "www.jd.com" },
        { id: 3, name: "www.baidu.com" },
        { id: 5, name: "www.google.com" },
        { id: 4, name: "www.taobao.com" }
      ],
      arr2: [{ id: 11, name: "常用菜单" }] 
    };
  },
  methods: {
    //拖拽完成事件
    add1(e) {
      console.log(e);
    },
    add2(e) {
      console.log(e);
    }
  }
};
</script>
<style scoped>
    .itxst {
      margin: 10px;
      text-align: left;
    }
    .col {
      width: 40%;
      flex: 1;
      padding: 10px;
      border: solid 1px #eee;
      border-radius: 5px;
      float: left;
    }
    .col + .col {
      margin-left: 10px;
    }
    .item {
      padding: 6px 12px;
      margin: 0px 10px 0px 10px;
      border: solid 1px #eee;
      background-color: #f1f1f1;
      text-align: left;
    }
    .item + .item {
      border-top: none;
      margin-top: 6px;
    }
    
    .item:hover {
      background-color: #fdfdfd;
      cursor: move;
    }
    .item2 {
      padding: 6px 12px;
      margin: 0px 10px 0px 10px;
      border: solid 1px #eee;
      background-color: pink;
      text-align: left;
    }
    .item2 + .item2 {
      border-top: none;
      margin-top: 6px;
    }
    
    .item2:hover {
      outline: solid 1px #ddd;
      cursor: move;
    }
</style>
Catalog
快速入门 js 版本 vue3 版本 常用例子 vue.draggable 单列拖拽 vue.draggable 表格拖动 vue.draggable 多列拖动 属性列表 group 拖拽分组 delay 响应时间 disabled 启用禁用 scroll 是否允许滚动 animation 过渡效果 handle 可拖动元素 filter 排除元素 chosenClass 选中样式 ghostClass 位符样式 clone 拷贝拖拽 事件列表 全部事件列表 move 自定义控制 add 拖拽完成事件 start 开始拖动