脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue.Draggable拖拽效果

Vue.Draggable实现拖拽效果

 更新时间：2020年07月29日 08:58:49   作者：Drox  
这篇文章主要介绍了Vue.Draggable实现拖拽效果，使用简单方便 ，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

快速实现Vue.Draggable的拖拽效果，供大家参考，具体内容如下

1.下载包：npm install vuedraggable

配置：package.json

"dependencies": {
 "element-ui": "^1.3.4",
 "less": "^2.7.2",
 "less-loader": "^4.0.4",
 "vue": "^2.3.3",
 "vue-router": "^2.3.1",
 "vuedraggable": "^2.11.0"
 },

2.在你的组件中引进依赖：

import draggable from 'vuedraggable'

3.注册：draggable这个组件

components: {
　　draggable
},

4.使用html模板中使用该组件

<draggable v-model="tags" :move="getdata" @update="datadragEnd">
  <transition-group>
   <div v-for="element in tags" :key="element.id">
    {{element.name}}
   </div>
  </transition-group>
</draggable>

5.有两个常用的方法

一个是拖动中

一个是拖动结束

 methods: {
  getdata (evt) {
  console.log(evt.draggedContext.element.id)
  },
  datadragEnd (evt) {
  console.log('拖动前的索引 :' + evt.oldIndex)
  console.log('拖动后的索引 :' + evt.newIndex)
  console.log(this.tags)
  }
 }

现在你就可以自己尝试使用了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue远程加载sfc组件思路详解

    vue远程加载sfc组件思路详解

    这篇文章主要介绍了vue远程加载sfc组件思路详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 详解lottie动画在vue中的应用

    详解lottie动画在vue中的应用

    Lottie 是一个适用于 Android、iOS、Web 和 Windows 的库,它使用 Bodymovin 解析导出为 JSON 的 Adobe After Effects 动画,下面我们就来看看它在vue中的是如何应用的吧
    2023-12-12
  • Vue+FormData+axios实现图片上传功能

    Vue+FormData+axios实现图片上传功能

    这篇文章主要为大家学习介绍了Vue如何利用FormData和axios实现图片上传功能，本文为大家整理了详细步骤，感兴趣的小伙伴可以了解一下
    2023-08-08
  • 详解从Vue.js源码看异步更新DOM策略及nextTick

    详解从Vue.js源码看异步更新DOM策略及nextTick

    本篇文章主要介绍了从Vue.js源码看异步更新DOM策略及nextTick，具有一定的参考价值，感兴趣的小伙伴们可以参考一
    2017-10-10
  • Vue实现学生管理功能

    Vue实现学生管理功能

    这篇文章主要为大家详细介绍了Vue实现学生管理功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 从vue-router看前端路由的两种实现

    从vue-router看前端路由的两种实现

    本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由，介绍了相关原理，并对比了两种方式的优缺点与注意事项。最后分析了如何实现可以直接从文件系统加载而不借助后端服务器的Vue单页应用。
    2021-05-05
  • vue3+webpack中npm发布组件的实现

    vue3+webpack中npm发布组件的实现

    本文主要介绍了vue3+webpack中npm发布组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • vue 在methods中调用mounted的实现操作

    vue 在methods中调用mounted的实现操作

    这篇文章主要介绍了vue 在methods中调用mounted的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue中如何获取本地IP地址

    vue中如何获取本地IP地址

    这篇文章主要介绍了vue中如何获取本地IP地址，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue如何给页面增加url前缀

    vue如何给页面增加url前缀

    这篇文章主要介绍了vue如何给页面增加url前缀问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12

最新评论