vue中使用vue-draggable教程

这篇具有很好参考价值的文章主要介绍了vue中使用vue-draggable教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue-draggable是一个基于Vue.js的可拖拽组件库,可以方便地实现拖拽排序、拖拽交换等功能。

安装

首先需要安装vue-draggable组件库。可以通过npm进行安装:

npm install vuedraggable --save

使用

  1. 引入组件

在vue组件中引入vuedraggable组件:

import draggable from 'vuedraggable'
  1. 注册组件

在vue组件中注册draggable组件:

export default {
  components: {
    draggable
  }
}
  1. 使用组件

在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'}
    ]
  }
}
  1. options

options是一个对象,用于配置draggable组件的行为。下面是一些常用的配置:

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

draggable组件还提供了一些事件,可以在事件回调函数中处理一些逻辑。下面是一些常用的事件:

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

完整示例

下面是一个完整的示例:文章来源地址https://www.toymoban.com/news/detail-486692.html

<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中使用vue-draggable教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue.draggable浅尝

    Vue.Draggable 是一款基于 Sortable.js 实现的 vue拖拽插件 。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、 vue 2 过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。本篇将介绍如何搭建环境及简单的例子,使用起来特别简

    2024年02月13日
    浏览(29)
  • 【Vue】vue3 v-draggable 拖拽指令封装

    需求:实现一个拖拽指令,可在父元素区域任意拖拽元素,同时如果传入的值为 father,则拖拽的时候以父元素为拖拽对象 思路: 1、设置需要拖拽的元素为absolute,其父元素为relative。 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 3、鼠标移动(onmousemove)时计算每

    2024年02月16日
    浏览(34)
  • 实战教程:如何使用Java+SpringBoot+Vue+MySQL构建一个成功的美食网站

    ✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月23日
    浏览(56)
  • 创建一个vite+vue3项目详细教程

    一、首先打开本地磁盘,找到一个存放路径  这里 我选择将新建项目放置在E盘的demo-vitedemo路径下 二、在该路径处打开命令行cmd  三、在打开的命令行中输入创建命令  注意在搭建之前要安装node.js环境依赖,并且确认你的版本 Vite 需要Node.js版本 14.18+,16+。然而,有些模板需

    2024年02月15日
    浏览(55)
  • 使用vue-cli创建第一个vue项目

    命令提示符切换至需要创建项目的目录: 直接在路径 输入cmd 在按键盘的 enter键 打开的终端就直接切换到该目录下 (1)输入以下命令: vue create 项目名称 (2)我这里选手动选择,键盘 上下 按钮,选完后按 enter键 (3)我这里选Babel和CSS,键盘 上下 按钮,选中或取消选中按

    2023年04月17日
    浏览(64)
  • Mac OS安装Vue CLI脚手架并创建一个基础项目教程

    前后端分离 可以大大地提高开发效率,主流的解决方案为 Vue.js+SpringBoot ,这里主要介绍 Vue在Mac端的入门教程 。软硬件环境为Macbook Air M2+macOS Vantura 13.4.1。 Vue (发音为 /vjuː/,类似 view) 是一款用于 构建用户界面 的 JavaScript 框架,是官方提供的 基于 Webpack 的 Vue 工具链 。它基

    2024年02月04日
    浏览(113)
  • 使用VSCode创建一个Vue项目

    1. 下载 Node.js 官网地址:Node.js ,选择长期维护版下载。 安装时可以自己选择安装位置,然后一直选择 next 即可。安装完成后,打开命令行窗口,输入 node -v , 出现了版本号信息就表示已经成功安装。 配置环境变量:node.js会在系统变量Path里自动配置好: 2. 安装 npm 由于NPM的

    2024年02月06日
    浏览(57)
  • 使用Vue完成一个户籍管理系统

    ```js template   div     h2学籍管理系统/h2     div       姓名:       input v-model=\\\"user.name\\\" /     /div     div       年龄:       input v-model=\\\"user.age\\\" /     /div     div       性别:       input v-model=\\\"user.sex\\\" /     /div     div       手机:       input v-model=\\\"user.tel\\\" /     /div    

    2024年02月05日
    浏览(45)
  • 如何使用vue ui创建一个项目?

    首先打开cmd 输入vue ui 等待浏览器打开一个窗口,按照下图操作  在\\\"功能页面\\\"中,各个插件代表以下意思: Babel:Babel是一个JavaScript编译器,用于将ES6+代码转换为向后兼容的JavaScript版本,以确保代码在旧版本的浏览器上正常运行。 TypeScript:TypeScript是一种由微软开发的静态

    2024年02月13日
    浏览(52)
  • 完成第一个 Vue3.2 项目后,使用体会

    在vue3.2中,正式支持了script setup的写法,这样可以大大简化组件的代码量,减少一些重复操作,我认为当你写vue3时,应该把这当作默认写法。在vue3.2之前,一般会这样写。 那么现在,我们可以这样写,对比一下,减少了多少行代码呢 PS:之后的代码我会省略script setup,默认都在

    2024年02月07日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包