官网地址：
https://www.npmjs.com/package/vuedraggable
https://github.com/SortableJS/Vue.Draggable

效果：https://sortablejs.github.io/Vue.Draggable/#/custom-clone
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

一.安装

npm i -S vuedraggable

或者引入：

二.使用

1.场景：单个列表内部简单的拖拽（不克隆）

<template>
  <div class="twoPage"> 
    <draggable  :list="list" :disabled="!enabled" class="list-group" ghost-class="ghost"
        :move="checkMove" @start="dragging = true" @end="dragging = false">
        <div class="list-group-item" v-for="element in list" :key="element.name">
          {{ element.name }}
        </div>
      </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
      enabled: true,
      list: [
        { name: "1 - John", id: 0 },
        { name: "2 - Joao", id: 1 },
        { name: "3 - Jean", id: 2 }
      ],
      dragging: false
    };
  },
  components:{
    draggable
  },
  mounted() {
  },
  methods: {
    checkMove: function(e) {
      window.console.log("Future index: " + e.draggedContext.futureIndex);
    }
  }
};
</script>
<style lang="less">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item{
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  }
}
</style>

效果如下：
在这里插入图片描述

2.场景：两个列表间的拖拽（不克隆）

左边往右边拖拽，拖过来一个，左边就少一个，右边就会多一个

<template>
  <div class="twoPage"> 
      <div class="el-row">
        <div class="el-col" :span="12">
          <h3>Draggable 1</h3>
          <draggable class="list-group" :list="list1" group="people" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>

        <div class="el-col" :span="12">
          <h3>Draggable 2</h3>
          <draggable class="list-group" :list="list2" group="people" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
     list1: [
        { name: "list1 - 1:John", id: 1 },
        { name: "list1 - 2:Joao", id: 2 },
        { name: "list1 - 3:Jean", id: 3 },
        { name: "list1 - 4:Gerard", id: 4 }
      ],
      list2: [
        { name: "list2 - 1:Juan", id: 5 },
        { name: "list2 - 2:Edgard", id: 6 },
        { name: "list2 - 3:Johnson", id: 7 }
      ]
    };
  },
  components:{
    draggable
  },
  mounted() {
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    }
  }
};
</script>
<style lang="less">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item{
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  }
}
</style>

在这里插入图片描述

options配置项，
sort:false 表示拖动时禁止其进行排序操作
group: {name: ‘field’, pull: ‘clone’, put: false} 表示进行克隆拖动操作，并且该name和拖动的目标位置group名称一致，如右侧draggable标签的group同样为field
draggable=“.item” 将可拖动属性下放到每一个按钮下

3.场景：两个列表间的拖拽（克隆）

效果：左边往右边拖拽，拖过来一个，左边不会少，但右边就会多一个，相当于复制。

代码场景2的区别在于：
:group="{ name: 'people', pull: 'clone', put: false }"：表示可拖拽克隆出去，但不接收外面拖拽过来的
group="people"：简单的内部拖拽

<template>
  <div class="twoPage"> 
      <div class="el-row">
        <div class="el-col" :span="12">
          <h3>Draggable 1</h3>
          <draggable class="list-group" :list="list1" :group="{ name: 'people', pull: 'clone', put: false }" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>

        <div class="el-col" :span="12">
          <h3>Draggable 2</h3>
          <draggable class="list-group" :list="list2" group="people" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
     list1: [
        { name: "list1 - 1:John", id: 1 },
        { name: "list1 - 2:Joao", id: 2 },
        { name: "list1 - 3:Jean", id: 3 },
        { name: "list1 - 4:Gerard", id: 4 }
      ],
      list2: [
        { name: "list2 - 1:Juan", id: 5 },
        { name: "list2 - 2:Edgard", id: 6 },
        { name: "list2 - 3:Johnson", id: 7 }
      ]
    };
  },
  components:{
    draggable
  },
  mounted() {
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    }
  }
};
</script>
<style lang="less">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item{
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  }
}
</style>

效果和场景2一样
在这里插入图片描述

4.场景：两个列表间的拖拽-自定义克隆（克隆）

:clone="cloneDog" 这个方法自定义克隆

<template>
  <div class="twoPage"> 
      <div class="el-row">
        <div class="el-col" :span="12">
          <h3>Draggable 1</h3>
          <draggable class="list-group" :list="list1" :group="{ name: 'people', pull: 'clone', put: true }" @change="log" :clone="cloneDog">
            <div
              class="list-group-item"
              v-for="(element, index) in list1"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>

        <div class="el-col" :span="12">
          <h3>Draggable 2</h3>
          <draggable class="list-group" :list="list2" :group="{ name: 'people', pull: 'clone', put: true }" @change="log">
            <div
              class="list-group-item"
              v-for="(element, index) in list2"
              :key="element.name"
            >
              {{ element.name }} {{ index }}
            </div>
          </draggable>
        </div>
      </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
     list1: [
        { name: "list1 - 1:John", id: 1 },
        { name: "list1 - 2:Joao", id: 2 },
        { name: "list1 - 3:Jean", id: 3 },
        { name: "list1 - 4:Gerard", id: 4 }
      ],
      list2: [
        { name: "list2 - 1:Juan", id: 5 },
        { name: "list2 - 2:Edgard", id: 6 },
        { name: "list2 - 3:Johnson", id: 7 }
      ]
    };
  },
  components:{
    draggable
  },
  mounted() {
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    },
    cloneDog({ id }) {
      return {
        id: 8,
        name: 'cat'
      };
    }
  }
};
</script>
<style lang="less">
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  width: 300px;
  .list-group-item{
    cursor: move;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
  }
}
</style>
# 前端
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign