vue拖拽组件awe-dnd使用方法简述及参数说明

最新推荐文章于 2024-05-08 09:45:00 发布
最新推荐文章于 2024-05-08 09:45:00 发布
阅读量4.8k 收藏 3
点赞数
文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shinjie1210/article/details/120006424
版权

目录

安装组件

应用实例及参数说明

实现效果

代码

参数说明

做拖拽的时候搜到这个小组件 简单易用 记录一下

官方文档：点击此处

安装组件

很简单啊  先控制台安装

npm install awe-dnd --save

然后去main.js里引用

import VueDND from 'awe-dnd'
Vue.use(VueDND)

应用实例及参数说明

用官方文档给的数据写的实例，因为文档说的也不是很细致，所有的参数说明是我自行理解的

有不对的地方还请大佬指正

先新建个简单的vue项目，为了方便体现就直接在home页写了

实现效果

代码

要注意一点：这种遍历出来的元素一定要写key值，不然组件不生效

<templa
最低0.47元/天 解锁文章
shinjie1210
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue拖拽组件awe-dnd
日常笔记/总结/系列知识梳理
05-06 8722
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】awe-dnd拖拽排序插件demo完整代码
weixin_42575720的博客
06-24 321
【vue】awe-dnd拖拽排序插件demo完整代码
Vue 2.0中使用Awe-dnd进行拖拽排序
越陌度阡
11-09 2059
1. 安装插件 npm install awe-dnd --save 2. 引入插件 import VueDND from 'awe-dnd' Vue.use(VueDND) 3. 使用插件 <template> <div class="title-list"> <div v-dragging="{item: item, list:list}" v-for="item in list"
推荐使用Vue-Easy-DnD：轻量级拖放解决方案
gitblog_00068的博客
05-08 381
推荐使用Vue-Easy-DnD：轻量级拖放解决方案 项目地址:https://gitcode.com/rlemaigre/Easy-DnD 1、项目介绍 Vue-Easy-DnD是一个专为Vue.js框架设计的拖放库，旨在提供一个简单易用且强大的替代方案来应对HTML5原生拖放API的复杂性。这个项目由Romain Lemaigre发起，它允许开发者通过标准鼠标事件实现组件之间的数据传输和列表排...
使用vue awe-dnd插件实现拖动交换位置
wangaiwen的博客
03-15 325
使用vue awe-dnd插件实现拖动交换位置
Vue-draggable和awe-dnd 拖拽插件的使用简介
SueLight的博客
05-07 971
一、Vue-draggable 二、awe-dnd
使用vue-awe-dnd做元素拖动排序
wangaiwen的博客
03-14 155
【代码】使用vue-awe-dnd做元素拖动排序。
简单使用vue拖拽组件vue3-dnd
woflyoycm的博客
01-30 4075
vue3-dnd vue3项目拖拽元素以及保存拖拽位置
vue-smooth-dnd：用于vue-dnd的Vue包装器组件
02-06
Vue平滑DnD 用于Vue.js的快速，轻巧的拖放式可排序库，具有许多配置选项，涵盖许多d＆d场景。 该库由库组成的包装Vue.js组件。演示版在此处查看演示：安装npm i vue-smooth-dnd用法Vue < template> < div> ...
Easy-DnD:Vue.js 2 https 的拖放实现
08-04
Easy-DnD 是 Vue.js 2 的拖放实现，它仅使用标准鼠标事件而不是 HTML5 拖放 API，这是. 将其视为使用鼠标或支持鼠标辅助复制/剪切粘贴将数据从某些组件传输到其他组件的一种方式。 它还允许通过拖放重新排序列表。...
vue 翻页组件vue-flip-page效果
10-15
Vue Flip Page是一个用于创建翻页效果的组件，适用于Vue.js框架。这个组件允许开发者实现类似纸质书籍的翻页效果，为用户带来更加直观和交互性强的体验。在本文中，我们将深入探讨Vue Flip Page的基本使用、核心功能...
Vue.js路由组件vue-router使用方法详解
12-29
使用Vue.js + vue-router 创建单页...vue-router使用方法</title> </head> <body> <h1>Hello App! <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. -->
vue-dnd-zone:vue.js插件，具有拖放功能
05-05
它不是外部js库的包装器，而是用于管理拖放事件和数据模型状态的一组vue组件示例，演示，API： 特征平稳过渡拖动时自动滚动支持嵌套结构轻量级（〜4kb gzip压缩） 支持触摸事件安装npm install vue-dnd-zone//main....
vue-router的使用方法及含参数的配置方法
10-17
在本文中，我们将深入探讨 Vue Router 的使用方法以及如何配置含参数的路由。 首先，让我们从基本的 `router-link` 组件开始。`<router-link>` 是用于创建导航链接的组件，它的 `to` 属性指定目标路径。例如，`...
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
主要介绍了VUE使用 wx-open-launch-app 组件开发微信打开APP功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
Vue-Cron是一款基于Vue.js开发的时间周期（Cron）表达式组件，用于在前端应用程序中创建、编辑和处理定时任务。Vue-Cron旨在提供一种直观的用户界面，让用户能够通过图形化的方式设置复杂的Cron表达式，从而实现定时...
vue富文本编辑器组件vue-quill-edit使用教程
12-12
近期项目vue单页面，就使用vue-quill-edit这个编辑器组件吧！ 一、安装 cnpm install vue-quill-editor 二、引入 在main.js引入并注册： import VueQuillEditor from 'vue-quill-editor' // require styles 引入...
vue3-seamless-scroll 使用及参数配置说明
最新发布
05-14
vue3-seamless-scroll 是一个基于 Vue3 开发的无缝滚动组件，支持水平和垂直两种滚动方式，同时可以自定义滚动速度、延迟等参数。使用方法如下： 1. 安装组件： ``` npm install vue3-seamless-scroll --save ``` 2. 在组件中引入并注册组件： ``` <template> <vue3-seamless-scroll> // 内容区域 </vue3-seamless-scroll> </template> <script> import Vue3SeamlessScroll from 'vue3-seamless-scroll' export default { components: { Vue3SeamlessScroll } } </script> ``` 3. 可以根据需要配置组件的各种参数，例如： ``` <vue3-seamless-scroll :speed="50" :delay="2000" direction="horizontal"> // 内容区域 </vue3-seamless-scroll> ``` 其中，speed 表示滚动速度，单位为 px/s；delay 表示延迟多少毫秒开始滚动；direction 表示滚动方向，可选值为 "vertical" 或 "horizontal"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值