vue使用vue-draggable的全过程

更新时间：2024年03月07日 09:05:38 作者：jsmeng626

这篇文章主要介绍了vue使用vue-draggable的全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

安装

首先需要安装vue-draggable组件库。

可以通过npm进行安装：

npm install vuedraggable --save

使用

1.引入组件

在vue组件中引入vuedraggable组件：

import draggable from 'vuedraggable'

2.注册组件

在vue组件中注册draggable组件：

export default {
  components: {
    draggable
  }
}

3.使用组件

在vue模板中使用draggable组件：

<draggable v-model="list" :options="dragOptions">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>

参数配置

在使用draggable组件时，可以传递一些参数进行配置。

下面是一些常用的参数：

1.v-model

v-model用于绑定数据，它绑定的是一个数组，这个数组就是我们需要排序的数据。

例如：

data () {
  return {
    list: [
      {id: 1, name: 'item1'},
      {id: 2, name: 'item2'},
      {id: 3, name: 'item3'}
    ]
  }
}

2.options

options是一个对象，用于配置draggable组件的行为。

下面是一些常用的配置：

dragOptions: {
  animation: 200, // 动画时间，单位毫秒
  group: 'items', // 分组，同一分组内的元素可以互相拖拽
  disabled: false, // 是否禁用拖拽功能
  ghostClass: 'ghost', // 拖拽过程中占位元素的class名称
  handle: '.handle', // 拖拽手柄，只有拖拽手柄内的元素才能被拖拽
  sort: true, // 是否启用排序功能
  draggable: '.item', // 可拖拽元素的选择器
  filter: '.ignore' // 不可拖拽元素的选择器
}

3.events

draggable组件还提供了一些事件，可以在事件回调函数中处理一些逻辑。

下面是一些常用的事件：

methods: {
  onEnd (evt) { // 拖拽结束时触发
    console.log('onEnd', evt)
  },
  onMove (evt) { // 拖拽过程中触发
    console.log('onMove', evt)
  },
  onStart (evt) { // 开始拖拽时触发
    console.log('onStart', evt)
  }
}

完整示例

下面是一个完整的示例：

<template>
  <div>
    <h1>Vue Draggable Example</h1>
    <draggable v-model="list" :options="dragOptions" @end="onEnd" @move="onMove" @start="onStart">
      <div v-for="item in list" :key="item.id" class="item">
        <span class="handle">☰</span>{{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data () {
    return {
      list: [
        {id: 1, name: 'item1'},
        {id: 2, name: 'item2'},
        {id: 3, name: 'item3'}
      ],
      dragOptions: {
        animation: 200,
        group: 'items',
        disabled: false,
        ghostClass: 'ghost',
        handle: '.handle',
        sort: true,
        draggable: '.item',
        filter: '.ignore'
      }
    }
  },
  methods: {
    onEnd (evt) {
      console.log('onEnd', evt)
    },
    onMove (evt) {
      console.log('onMove', evt)
    },
    onStart (evt) {
      console.log('onStart', evt)
    }
  }
}
</script>

<style>
.ghost {
  opacity: 0.5;
  background-color: #ccc;
}
.handle {
  cursor: move;
  user-select: none;
}
.ignore {
  pointer-events: none;
}
</style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue 组件上的v-model双向绑定原理解析
这篇文章主要介绍了Vue 组件上的v-model双向绑定原理,从本文的学习可以知道组件上v-model指令的本质也是生成了value属性和input事件，具体实例代码跟随小编一起看看吧
2022-05-05
一文详解Pinia和Vuex与两个Vue状态管理模式
这篇文章主要介绍了一文详解Pinia和Vuex与两个Vue状态管理模式，Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia
2022-08-08
vue项目中,main.js,App.vue,index.html的调用方法
今天小编就为大家分享一篇vue项目中,main.js,App.vue,index.html的调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue中关闭eslint的方法分析
这篇文章给大家讲述了vue中关闭eslint的方法内容，有需要的读者们可以参考学习下。
2018-08-08
当启动vue项目安装依赖时报错的解决方案
这篇文章主要介绍了当启动vue项目安装依赖时报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue学习笔记之给组件绑定原生事件操作示例
这篇文章主要介绍了vue学习笔记之给组件绑定原生事件操作,结合实例形式详细分析了vue.js组件绑定原生事件相关原理、实现方法与操作注意事项,需要的朋友可以参考下
2020-02-02
vue3.0封装轮播图组件的步骤
这篇文章主要介绍了vue3.0封装轮播图组件的步骤，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-03-03
vue.js开发实现全局调用的MessageBox组件实例代码
最近学习了Vue.js，感觉组件这个地方知识点挺多的，而且很重要，所以决定记录下，下面这篇文章主要给大家介绍了关于利用vue.js开发实现全局调用的MessageBox组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-11-11
vue-router路由传参及隐藏参数问题
这篇文章主要介绍了vue-router路由传参及隐藏参数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
vue拖拽排序插件vuedraggable使用方法详解
这篇文章主要为大家详细介绍了vue拖拽排序插件vuedraggable的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11