【VUE】前端vuedraggable实现拖拽功能，以及vuedraggable和awe-dnd区别

最新推荐文章于 2025-03-13 16:20:03 发布
最新推荐文章于 2025-03-13 16:20:03 发布
阅读量2k 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ercyao/article/details/105842421
版权

>因为要做一个拖拽排序的功能，便了解下拖拽框架的使用，网上一搜就可以看到有[vuedraggable](https://www.npmjs.com/package/vuedraggable)和 [awe-dnd](https://github.com/hilongjw/vue-dragging)。这两个是一个东西，不同的是，两个库的里面不同，一个是直接进行组件封装，一个是进行指令封装。

于是便同时安装了两个插件，看下区别
![vuedraggable的使用](https://upload-images.jianshu.io/upload_images/10886634-f67369c8e5981710.gif?imageMogr2/auto-orient/strip)
![awe-dnd的使用](https://upload-images.jianshu.io/upload_images/10886634-efe36eb8c8911253.gif?imageMogr2/auto-orient/strip)
----
- 从上图可以看出来，其实vuedraggable动画效果更好点，再其次vuedraggable的文档更多点，而且github上有一些用法的代码

- 这个两个文档都很少，一些用法要自己去找研究，不太友好，唯一庆幸的是vuedraggable有例子

一开始看文档把代码粘贴上去，并没有上图的拖拽动画效果，后面看例子，才知道且将可拖动元素放进了 transition-group 下面才有过渡动画, awe-dnd也是一样。

----

#####指定点击某块才能拖拽
![3.gif](https://upload-images.jianshu.io/upload_images/10886634-b8217a08e7fbc2d3.gif?imageMogr2/auto-orient/strip)
设置handle就可以指定, 如果不想指定可以去掉，具体代码如下

```
<template>
  <div class="container">
    <h3>Draggable</h3>

    <draggable tag="ul"
               :list="list"
               v-bind="dragOptions"
               class="list-group&#

最低0.47元/天 解锁文章
Vue拖拽组件awe-dnd
日常笔记/总结/系列知识梳理
05-06 8900
Vue拖拽组件awe-dnd安装依赖在main.js中注册在页面drag.vue中运用效果图 安装依赖 npm install awe-dnd --save 安装相关文章：npm 安装指定版本（按版本安装） 在main.js中注册 import VueDND from 'awe-dnd'; // 注册-拖拽组件 Vue.use(VueDND); 在页面drag.vue中运用 <templ...
vue实现带拖拽功能的tab栏组件（awe-dnd）
weixin_41668951的博客
06-01 3523
最近项目中有一个需求，需要拖拽tab栏的顺序 来实现tab栏对应内容数组的顺序改变，在现有ui库中没有找到，就自己开发了一个 简单记录一下。 两种常用的拖拽插件 1、awe-dnd github地址：https://github.com/hilongjw/vue-dragging 2、vue-draggable github地址：https://github.com/SortableJS/Vue.Draggable 通过使用过发现vue-draggable 只能实现tab栏列表拖拽，tab对应的内容顺序不能
Vue - 拖拽排序功能（vuedraggable）
技术共享，共同进步！
09-08 8492
使用 vuedraggable 实现拖拽排序功能效果展示实现步骤 vuedraggable 中文文档： https://www.itxst.com/vue-draggable/tutorial.html 效果展示 实现步骤 安装依赖 npm install vuedraggable --save 组件中引入 import draggable from "vuedraggable"; components: { draggable, }, 组件中使用 <template>
用VueDraggable轻松实现拖拽表单和布局搭建：新手也能搞定的低代码方案
最新发布
qq_52932975的博客
03-13 1931
​ 如果你做过网页开发，肯定遇到过这样的需求：‌让用户能自己拖拽组件，拼出一个表单或者页面布局‌。比如常见的问卷调查系统、网站后台的页面编辑器等。 如果用原生JavaScript实现拖拽功能，需要处理大量事件监听、坐标计算，代码复杂容易出错。而 ‌VueDraggable‌ 是一个现成的Vue组件，它帮我们封装好了拖拽的核心逻辑，只需要简单配置
Vue-draggable和awe-dnd 拖拽插件的使用简介
SueLight的博客
05-07 1074
一、Vue-draggable 二、awe-dnd
vue的拖拽功能（vuedraggable）
Cool_so_cool的博客
08-19 2579
首先可以先看一下npm的官方文档：https://www.npmjs.com/package/vuedraggable 先理解一下，能看懂官方文档更好，看不懂，来看看项目中的实践。 1.先看两种下载方式 yarn add vuedraggable npm i -S vuedraggable 2.具体引入方式看各位项目中的位置了，下面来说一下，我项目中的引入方式 官方文档引入和注册 import draggable from 'vuedraggable' export default {
vue的拖拽插件: vue.draggable
编写博客，学习交流
03-02 3081
Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动，可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作，总之是一款非常优秀的vue拖拽组件。vue.draggable中文文档 - itxst.com。改变 listBak时,刷新图表显示。
vue拖拽组件awe-dnd使用方法简述及参数说明
shinjie1210的博客
08-30 5213
目录 安装组件 应用实例及参数说明 实现效果 代码 参数说明 做拖拽的时候搜到这个小组件 简单易用 记录一下 官方文档：点击此处 安装组件 很简单啊 先控制台安装 npm install awe-dnd --save 然后去main.js里引用 import VueDND from 'awe-dnd' Vue.use(VueDND) 应用实例及参数说明 用官方文档给的数据写的实例，因为文档说的也不是很细致，所有的参数说明是我自行理解的 有不对的地方还请大佬指正 先新建个.
使用vue-awe-dnd做元素拖动排序
wangaiwen的博客
03-14 214
【代码】使用vue-awe-dnd做元素拖动排序。
一个非常好用的前端框架，拖拽复制就能用
12-27
一个非常好用的前端框架，拖拽复制就能用，包含各种报表、列表、菜单、登录、注册、搜索、图表、…………
vue可拖拽组件vuedraggable
weixin_55648290的博客
01-20 797
vue可拖拽组件vuedraggable
Awednd一个轻量的Vue拖动排序插件
08-10
Awe-dnd:一个轻量的 Vue 拖动排序插件
Vue.Draggable：基于Sortable.js的Vue拖放组件
02-06
Vue可拖动 Vue组件（Vue.js 2.0）或指令（Vue.js 1.0）允许拖放并与视图模型数组同步。 基于并提供所有功能 对于Vue 3 参见 演示版 现场演示 产品特点 全面支持功能： 支持触摸设备 支持拖动手柄和可选文本 智能自动滚动 支持不同列表之间的拖放 没有jQuery依赖 保持同步HTML并查看模型列表 与Vue.js 2.0过渡组兼容 取消支援 需要完全控制的事件报告任何更改 重用现有的UI库组件（例如 ， 或等），并使用tag和componentData道具使其可拖动 支持者 使用Vue，React和Angular制作的管理仪表板模板。 捐 觉得这个项目有
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
10-16
主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-draggable
m0_51282855的博客
10-19 219
文档地址:https://www.itxst.com/vue-draggable/tutorial.html 事件及使用方法地址:https://github.com/SortableJS/Vue.Draggable
前端组件化(可拖拽进度条组件)
qq_35427185的博客
03-15 1846
    项目更迭创建前端ui组件库的一些归纳总结。 1.组件化开发解决的问题： 复用代码降低代码耦合性，保证相同功能表现一致性，使代码阅读清晰，减少重复工作降低开发成本。 2.组件化开发原则： 可配置：明确输入配置和输出结果，输入配置包括数据，样式，配置代码，事件回调，css等，输出结果应该是响应式的 标准性：遵守约定俗成的或系统统一的标准，能被不同开发人员简单使用。 复用性：使可作用于不同工作场景，尽量不拘泥于特定业务场景 耦合性：降低代码的依赖，减少代码的
Vue.Draggable - 基于 Vue.js 丝般柔滑的拖拽排序组件
那些免费的砖
09-24 1178
截止发稿2020年8月10日，这可能是目前最好的拖拽排序解决方案了。 介绍 VueDraggable 是一个专门解决拖拽排序和拖拽分组的前端开源代码库。 在 jQuery 的时代，有很多动效非常流畅丝滑的拖拽排序插件，但在国内 Vue.js 起来后，却比较难找到一款像 Sortable.js 那样的组件，而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强组件。 特点 支持触摸设备，支持智能滚动； 支持拖拽和选择文本以及不同列表之间的拖拽； 拖拽和视图模型同步刷.
vue 拖拽功能（draggable）
weixin_45005700的博客
10-10 684
vue 拖拽功能（draggable）
Vue 拖拽组件（实现上下拖拽） vuedraggable
Austin的博客
02-05 2078
fm: 首先 npm i -S vuedraggable 这样可以实现一列按钮之间 可以进行上下拖拽 重新排版 <template> <vuedraggable v-model="list"> <transition-group> <div v-for="item in list" :key="item" class="item"> <van-button>{{item}}</van-button&gt
AntDesign vue 结合 vuedraggable 实现拖拽排序功能
05-26
Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，而 vuedraggable 是一个 Vue.js 的拖放组件。两者结合使用，可以实现拖拽排序的功能。 首先，需要在项目中安装 Ant Design Vue 和 vuedraggable： ``` npm install ant-design-vue vuedraggable --save ``` 接着，在需要使用拖拽排序功能的组件中，引入 vuedraggable 组件： ```html <template> <div> <draggable v-model="list" :options="{handle:&#39;.drag-handle&#39;}"> <div v-for="(item, index) in list" :key="item.id"> <span class="drag-handle">☰</span> {{ item.name }} </div> </draggable> </div> </template> <script> import draggable from &#39;vuedraggable&#39;; export default { components: { draggable, }, data() { return { list: [ { id: 1, name: &#39;Item 1&#39; }, { id: 2, name: &#39;Item 2&#39; }, { id: 3, name: &#39;Item 3&#39; }, { id: 4, name: &#39;Item 4&#39; }, { id: 5, name: &#39;Item 5&#39; }, ], }; }, }; </script> ``` 在上述示例中，我们使用了 v-model 绑定了一个数组 `list`，这个数组里面包含了需要排序的元素。然后，在 `draggable` 组件中，我们使用了 `v-for` 循环渲染了每个元素，并且给每个元素添加了一个拖拽的句柄（也就是 `drag-handle` 类的元素）。 最后，我们还需要在 `options` 属性中传入一个选项对象，这个对象包含了一个 `handle` 属性，它指定了拖拽句柄的 CSS 选择器。 这样，我们就可以通过拖拽句柄来实现拖拽排序了。当用户拖动一个元素时，它会被移动到新的位置上，并且 `list` 数组中对应的元素顺序也会发生改变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值