vuedraggable自由拖拽html,vue中draggable拖拽列表的使用
1.安装
npm install vuedraggable
或者使用镜像安装
cnpm install vuedraggable
2.使用
首先在使用的组件中引入
import draggable from 'vuedraggable'
接着在组件中注册
components: {
draggable
}
页面使用
v-model="dataList"
@change="change"
@start="start"
@end="end"
:move="move">
{{item.name}}
事件
methods:{
//evt里面有两个值,一个evt.added 和evt.removed 可以分别知道移动元素的ID和删除元素的ID
change (evt) {
console.log(evt)
},
//start ,end ,add,update, sort, remove 得到的都差不多
start (evt) {
console.log(evt)
},
end (evt) {
console.log(evt)
evt.item //可以知道拖动的本身
evt.to // 可以知道拖动的目标列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖动前的位置
evt.newIndex // 可以知道拖动后的位置
},
move (evt, originalEvent) {
console.log(evt)
console.log(originalEvent) //鼠标位置
}
}
option属性配置
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
sort: true, // 内部排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px,在取消延迟拖动事件之前,点应该移动多少像素?
disabled: false, // 如果设置为真,则禁用sortable。
store: null, // @see Store
animation: 150, // ms, 动画速度运动项目排序时,' 0 ' -没有动画。
handle: ".my-handle", // 在列表项中拖动句柄选择器。
filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
draggable: ".item", // 指定元素中的哪些项应该是可拖动的。
ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
chosenClass: "sortable-chosen", // 设置被选中的元素的class
dragClass: "sortable-drag", //拖动元素的class。
dataIdAttr: 'data-id',
forceFallback: false, // 忽略HTML5的DnD行为,并强制退出。(h5里有个属性也是拖动,这里是为了去掉H5拖动对这个的影响)
fallbackClass: "sortable-fallback", // 使用forceFallback时克隆的DOM元素的类名。
fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中。(默认放在被拖动元素的同级)
fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px
slot
使用footer插槽在vuedraggable组件内添加不可拖动的元素。重要:它应该与可拖动选项一起使用,以标记可拖拽元素。注意,在默认情况下,页脚槽将始终被添加
{{element.name}}
Add
如果项目报警告
vue Do not use v-for index as key on children, this is the same as not using keys
报错的意思是:在子元素上,不要使用v-for索引作为键,否则与不使用键相同
解决办法: 把你列表循环 :key=“index” index可以换成 id 或者 给Index 随便加个数字 :key="item.id" 或者 :key="index + 10"
vuedraggable自由拖拽html,vue中draggable拖拽列表的使用相关推荐
- css鼠标拖拉卡顿_vue中解决拖拽改变存在iframe的div大小时卡顿问题
写在最前 针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章<vue中实现拖动调整左右两侧div的宽度>.此文章主要针对于实际应用中需要拖拽改变大小的组件中使用ifra ...
- Element UI表格拖拽(vue中) —— 行拖拽、列拖拽
目录 安装依赖 vuedraggable 实现拖拽的要点 行拖拽要点 列拖拽要点 完整范例代码 安装依赖 vuedraggable 安装 vuedraggable 的同时,会自动安装 sortabl ...
- vue中实现拖拽排序
原生拖拽 API 实现拖拽 设置元素 dragable 将元素的 dragable 属性设置 为 true (文本 图片 链接 的draggable 属性默认为 true)则元素可拖放 <div ...
- vue中使用滚动到列表底部
vue中列表滚动到底部 使用原生js,通过div.scrollTop = div.scrollHeight;实现滚动到底部 在vue中,可以使用不同的方式: 监听列表数据:当list发生变化时,执行滚 ...
- vue中实现拖拽调整顺序功能
一.使用vuedraggable是标准的组件式封装 或 vue-dragging 指令方式 实现拖拽调整顺序功能. 1:安装依赖 npm install vuedraggable或yarn add v ...
- vue中使用拖拽drag
被拖拽的节点 dragable="true" @dragstart="drag" 拖入的节点 @drop="drop" @dragover= ...
- 如何在vue中实现拖拽功能
HTML5 drag & drop 拖拽与拖放 想要实现该功能,先了解一下H5中的drag和drop这2个概念.
- vue中实现拖拽功能
自定义的全局指令 提示:拖拽指令 文章目录 自定义的全局指令 一.拖拽 1.自定义拖拽指令 2.页面挂载 3.css样式 提示:以下是本篇文章正文内容,下面案例可供参考 一.拖拽 1.自定义拖拽指令 ...
- Vue中实现拖拽效果
Vue2项目中遇到需求要求页面左侧部分实现拖拽效果 实现效果: 1665739151500 实现代码: 一.使用盒子包裹需要拖拽的区域,并绑定ref 二.使用$ref获取DOM信息 具体代码(这个方法 ...
最新文章
- 台式计算机系统重新安装软件,有人教我重装电脑程序的吗,谢谢了
- WordPress中的cookie 机制
- 面向对象的程序设计之原型模式
- SAP MPS、MRP名词解释
- 从开源自治,到微服务云化,阿里云的这款产品给了一剂提升微服务幸福感的良药
- .SQL Server中 image类型数据的比较
- Linux CentOS 6.5 + Apache + Mariadb + PHP环境搭建
- linux access
- Linux传递位置参数,Linux-scripts-位置参数等特殊变量
- 【WPF】右下角弹出自定义通知样式(Notification)——简单教程
- Hadoop学习总结(1)——大数据以及Hadoop相关概念介绍
- 离散数学_电子科大王丽杰
- 角动量守恒与陀螺力矩
- iOS 字体pt和px的转换
- 开源项目推荐:主流RPC开源框架及知识科普
- Scrapy爬取图片并重命名总结
- 微信开源C++Libco介绍与应用(二)
- 12种数据量纲化处理方式
- 代理模式与动态代理模式
- 1.生命游戏(netlogo)
热门文章
- 动态数据源切换的底层原理-DynamicDataSourceEntry
- 获取Class类对象的三种方式
- 类加载器-启动类加载器
- 什么是saashrm
- 服务器集群后产生那些问题
- 动态添加行 为元素解绑事件 delegate的解绑事件 off的解绑事件
- 第四单元用计算机写作,计算机复习题
- multipartfile前端怎么传_前端那些事如何更好管理 Api 接口
- postman cookie设置_是时候抛弃Postman了,因为REST Client更香
- forum.php 重定向,解析php 版获取重定向后的地址(代码)