一个全新的Vue拖拽特性实现:“移动”部分
关于拖拽
CabloyJS提供了完备的拖拽特性,可以实现移动
和调整尺寸
两大类功能,这里对移动
的开发进行阐述
关于
调整尺寸
的开发,请参见:拖拽:调整尺寸
演示
开发步骤
下面以模块test-party
为例,说明拖拽(移动)
的开发步骤
完整源码请参见文件src/module/test-party/front/src/kitchen-sink/pages/dragdrop/dragdropMove.vue
,这里只说明开发要点
1. v-eb-dragdrop
通过directive v-eb-dragdrop
向需要实现移动
的DOM元素附加拖拽特性
<f7-list class="test-dragdrop-move-list">
<eb-list-item v-for="(item,index) of items" :key="item" :title="item" :badge="getBadge(item,index)" v-eb-dragdrop="getDragdropContext(item)">
</eb-list-item>
</f7-list>
getDragdropContext(item) {
return {
scene: this.dragdropScene,
item,
onDragElement: this.onDragElement,
onDragStart: this.onDragStart,
onDropElement: this.onDropElement,
onDropLeave: this.onDropLeave,
onDropEnter: this.onDropEnter,
onDragDone: this.onDragDone,
onDragEnd: this.onDragEnd,
}
},
我们向v-eb-dragdrop
传入一个拖拽Context对象,具体参数如下:
名称 | 说明 |
---|---|
scene | 应用场景,用于隔离不同的拖拽元素组,通常我们使用便捷方法Vue.prototype.$meta.util.nextId('dragdrop') 创建一个唯一值 |
item | 与当前拖拽元素相关的自定义值 |
onDragElement | 当初始化拖拽特性时激发 |
onDragStart | 当启动拖拽时激发 |
onDropElement | 返回当前拖拽目标元素 |
onDropLeave | 当鼠标移出拖拽目标元素时激发 |
onDropEnter | 当鼠标移入拖拽目标元素时激发 |
onDragDone | 当一个有效的拖拽行为完成时激发 |
onDragEnd | 当拖拽行为结束时激发 |
2. 拖拽样式
当鼠标移入一个有效的拖拽目标元素时,会自动给这个DOM元素添加一个data属性data-dragdrop-drop
。我们可以通过CSS样式来高亮显示当前拖拽目标元素
.test-dragdrop-move-list {
li {
&[data-dragdrop-drop] {
background: rgba(128, 128, 128, 0.5);
}
}
}
更完整的data属性清单如下:
名称 | 说明 |
---|---|
data-dragdrop-element | 可拖拽元素 |
data-dragdrop-drag | 当前拖拽源元素 |
data-dragdrop-drop | 当前拖拽目标元素 |
拖拽事件
1. onDragElement
当初始化拖拽特性时激发,如果拖拽手柄与拖拽源元素不同,可通过此事件返回拖拽手柄对应的拖拽源元素
onDragElement({ $el, context }) {
// return undefined or
return dragElement;
},
- 参数
名称 | 说明 |
---|---|
$el | 拖拽手柄元素 |
context | 拖拽Context对象 |
- 返回值
名称 | 说明 |
---|---|
undefined | 如果拖拽手柄与拖拽源元素相同,可以返回undefined,或者不必响应此事件 |
dragElement | 返回与拖拽手柄对应的拖拽源元素 |
2. onDragStart
当启动拖拽时激发。我们可以通过此事件返回一个tooltip信息,进行友好的提示
onDragStart({ $el, context, dragElement }) {
const indexDrag = this.__getItemIndex(context.item);
this.indexDragIndex = indexDrag;
const tooltip = context.item;
return { tooltip };
},
- 参数
名称 | 说明 |
---|---|
$el | 拖拽手柄元素 |
context | 拖拽Context对象 |
dragElement | 拖拽源元素,有可能与$el不同 |
- 返回值
名称 | 说明 |
---|---|
tooltip | 拖拽源元素的提示信息 |
3. onDropElement
返回当前拖拽目标元素。可以基于DOM元素之间的位置关系来判断当前元素是否可以作为拖拽目标
onDropElement({ $el, context, dragElement, dragContext }) {
const indexDrop = this.__getItemIndex(context.item);
const indexDrag = this.__getItemIndex(dragContext.item);
if (indexDrop === indexDrag || indexDrop == indexDrag + 1) return null;
// dropElement
const dropElement = $el;
// tooltip
const tooltip = context.item;
// ok
return { dropElement, tooltip };
},
- 参数
名称 | 说明 |
---|---|
$el | 拖拽目标的手柄元素 |
context | 拖拽目标的Context对象 |
dragElement | 拖拽源元素 |
dragContext | 拖拽源的Context对象 |
- 返回值
名称 | 说明 |
---|---|
null | 如果当前元素不可作为拖拽目标,就返回null |
dropElement | 当前拖拽目标元素 |
tooltip | 当前拖拽目标元素的提示信息 |
4. onDropLeave
当鼠标移出拖拽目标元素时激发
当鼠标移出拖拽目标元素时,系统会自动移除DOM元素中的data属性data-dragdrop-drop
。因此,一般而言,可以通过CSS样式来切换拖拽目标的高亮显示。我们仍然可以通过此事件定制格外的行为
onDropLeave({ $el, context, dropElement }) {
this.indexDropIndex = -1;
},
- 参数
名称 | 说明 |
---|---|
$el | 拖拽目标的手柄元素 |
context | 拖拽目标的Context对象 |
dropElement | 拖拽目标元素 |
5. onDropEnter
当鼠标移入拖拽目标元素时激发
当鼠标移入拖拽目标元素时,系统会自动向DOM元素添加data属性data-dragdrop-drop
。因此,一般而言,可以通过CSS样式来切换拖拽目标的高亮显示。我们仍然可以通过此事件定制格外的行为
onDropEnter({ $el, context, dropElement }) {
const indexDrop = this.__getItemIndex(context.item);
this.indexDropIndex = indexDrop;
},
- 参数
名称 | 说明 |
---|---|
$el | 拖拽目标的手柄元素 |
context | 拖拽目标的Context对象 |
dropElement | 拖拽目标元素 |
6. onDragDone
当一个有效的拖拽行为完成时激发
onDragDone({ $el, context, dragElement, dropElement, dropContext }) {
const indexDrag = this.__getItemIndex(context.item);
this.items.splice(indexDrag, 1);
const indexDrop = this.__getItemIndex(dropContext.item);
this.items.splice(indexDrop, 0, context.item);
},
- 参数
名称 | 说明 |
---|---|
$el | 拖拽源的手柄元素 |
context | 拖拽源的Context对象 |
dragElement | 拖拽源元素 |
dropElement | 拖拽目标元素 |
dropContext | 拖拽目标的Context对象 |
7. onDragEnd
当拖拽行为结束时激发。如果需要执行清理工作,可以响应此事件
onDragEnd({ $el, context, dragElement }) {
this.indexDragIndex = -1;
},
- 参数
名称 | 说明 |
---|---|
$el | 拖拽源的手柄元素 |
context | 拖拽源的Context对象 |
dragElement | 拖拽源元素 |
一个全新的Vue拖拽特性实现:“移动”部分的更多相关文章
- 一个全新的Vue拖拽特性实现:“调整尺寸”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...
- Vue拖拽组件
vue开发公众号项目,***产品需要添加一个新的功能.拖拽功能.一听简单.百度上轮子挺多,直接拉一个过来用着就行.然鹅...兴奋之余,却失望至极.东西很多,没有一个能使得.你让我失望,那我就让你绝望. ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- jQuery 学习笔记3 点击弹出一个div并允许拖拽移动
这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...
- 使用TypeScript给Vue 3.0写一个指令实现组件拖拽
最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考 ...
- vue2-dragula vue拖拽组件
https://github.com/kristianmandrup/vue2-dragula git 地址 https://github.com/kristianmandrup/vue2-dragu ...
- Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...
- Vue 拖拽组件 vuedraggable 和 vue-dragging
一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...
随机推荐
- 数据库number(4,3)表示什么
1 你看 number(4,3)是表示 这个数 一共有4位是有效位,后面的3 表示有3个是小数也就是这个数 只能是1.234,这样格式的 最大只能是9.999,2 number(3,4) 表示这个数 ...
- LibreOffice(开源免费办公软件)
LibreOffice(开源免费办公软件) 官方地址 中文网站:https://zh-cn.libreoffice.org/ 下载地址: https://zh-cn.libreoffice.org/d ...
- Java基础之浅谈集合
Java基础知识.关于List.Set.Map接口的了解,以及ArrayList.LinkedList.HashSet.TreeSet.HashMap.TreeMap...
- 小天才XTC Z1S开启ADB
起因 最近入手了Apple Watch,但因系统闭源和国区App Store第三方应用实在是少,所以就开始折腾起安卓表来了.正好家里有块给小孩子用的小天才手表,所以就想到了通过ADB调试安装一些这块表 ...
- 记录,element ui的日期选择器只有第一次回显成功
首先是这个 <el-date-picker v-model="value1" type="daterange" range-separator=" ...
- Cf #709 Div. 2 B. Restore Modulo 一个只有三千多人过的b题, 妙啊!
传送门: https://codeforces.com/contest/1484/problem/B 原题 Example input 6 6 1 9 17 6 14 3 3 4 2 2 3 7 3 ...
- python基础练习题(题目 学习使用auto定义变量的用法)
day28 --------------------------------------------------------------- 实例042:变量作用域 题目 学习使用auto定义变量的用法 ...
- 浅谈 TCP、IP、DNS 和 HTTP 的关系
一.浅谈三个协议的基本概念 1.IP 协议 按层次分,IP网际协议位于网络层,几乎所有的网络的系统都会用到 IP 协议,其重要性非同一般.IP 协议作用就是把各种数据包传送给对方,对方的地址就要看其 ...
- python学习-Day23
目录 今日内容详细 logging模块(续集) 日志模块的主要组成部分 配置字典 配置字典在项目中的使用 第三方模块 如何利用工具下载第三方模块 查看当前解释器下载的第三方模块 下载第三方模块 直接使 ...
- IOC容器--1.12. 基于 Java 的容器配置
用Java的方式配置Spring ,不使用Spring的XML配置,全权交给Java来做 JavaConfig是Spring的一个子项目,在Sring 4 之后成为核心功能 这种纯Java的配置方式 ...