用vue插件 vuedraggable 实现元素拖动

START

• 今天来讲讲vuedraggable这个拖动组件

基本介绍

• Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件

• 支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽

• 不依赖jQuery为基础

• vue 2过渡动画兼容、支持撤销操作

• 拖动的数据和data里的数据是双向绑定的，在界面元素拖动后，data中的数据也是跟着变化的

  总之是一款非常优秀的vue拖拽组件

开门见山

话不多说，直接写个demo，来个简单的使用案例，直接开始。

在此之前，请自行创建vue项目

1.安装

• npm或yarn安装

npm i -S vuedraggable

yarn add vuedraggable

2.创建一个vue文件

<template>
  <div class="hello">
    <h2>vuedraggable 拖动组件</h2>
     <!-- 第四步，给组件绑定我们要被拖拽对象的数组 -->  
    <draggable v-model="myArray">
      <div class="item" v-for="element in myArray" :key="element.id">
        {{ element.name }}
      </div>
    </draggable>

    <!-- 下面的代码用于验证，拖动的数据和data里的数据是双向绑定的 -->   
    <!-- <h2>vuedraggable 拖动之后，data中的数据</h2>
    <div v-for="item in myArray" :key="item.id">
       {{item.name}}
    </div>  -->
  </div> 
</template>

<script>
//第一步：导入draggable组件
import draggable from "vuedraggable";
export default {
  name: "HelloWorld",
  //第二步：注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      //第三步：定义要被拖拽对象的数组
      myArray: [
        { id: 1, name: "周杰伦1" },
        { id: 2, name: "林俊杰2" },
        { id: 3, name: "霍建华3" },
        { id: 4, name: "刘德华4" },
      ],
    };
  },
};
</script>

<style scoped>
</style>

3.效果展示

拖动效果.gif

END

• 当前在写的项目就需要用到这个，后续再补充，详细的参数以及动画添加。ღ( ´･ᴗ･` )比心