vue拖动添加模块展示_一个全新的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元素附加拖拽特性
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拖拽特性实现:“移动”部分相关推荐
- vue拖动添加模块展示_vue-quill-editor的增强模块,提供图片上传,复制插入,拖拽插入...
sorry everyone, 由于作者自身原因,没有精力和时间处理issues,该插件已经不做维护了,希望大家见谅. quill-image-extend-module vue-quill-edit ...
- vue router name命名规范_超完整的Vue入门指导
脚本之家 你与百万开发者在一起 作者 | kiba518出品 | 脚本之家(ID:jb51net)前言 新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一 ...
- vue aplayer 进度条无法拖动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...
演示事例 http://www.longstudy.club/vue-drag-scroll/index.html 最近在做一个新的项目,有个需求是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会 ...
- IntelliJ IDEA 如何知道项目中的模块数据_如何从项目源中选择模块加入当前项目中(添加模块)_如何移除项目中的模块(移除模块/删除模块)
文章目录 IDEA 如何获取项目的模块数据 从项目源中选择模块加入当前项目中 如何移除项目中的模块 方式一,选择模块的根目录(Content Root),鼠标右键 Remove 方式二,打开[项目结构 ...
- java 不让滚动条随着拖拽滑动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...
演示事例 http://www.longstudy.club/vue-drag-scroll/index.html 最近在做一个新的项目,有个需求是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会 ...
- vue 移动端头像裁剪_vue头像上传裁剪组件_一个漂亮的Vue组件,用于图像裁剪和上传...
vue头像上传裁剪组件 vue-image-crop-upload (vue-image-crop-upload) A beautiful vue component for image crop a ...
- vue停止指令_一个微小的Vue指令,当到达边缘时停止传播滚动
vue停止指令 停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...
- vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
- vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
最新文章
- spark大批量读取Hbase时出现java.lang.OutOfMemoryError: unable to create new native thread
- win2003+sql2005配置
- 谷歌浏览器检查更新时出错:无法启动更新检查(错误代码为 3: 0x80080005 -- system level)
- 微软对键盘上的Page Up Page Down按钮享有专利权
- php去除两个重复,php – 如何从两个数组中删除重复对?
- 基于PHPCMS的SQL注入(Havij)
- datacount+php,dataCount.php
- iOS 推送证书制作 (JAVA/PHP)
- 网络***思路总结 Network penetration ideas
- 数学建模:人口增长模型
- 【外文文献检索与下载方法】
- 计算机图形学上机心得,计算机图形学学习的心得体会
- 淘宝客怎么推广?学会这三招,赚钱不再愁
- 如何实现 React 中的状态自动保存?
- 《领导变革》读书笔记
- 大一上学期C++课程设计——学生成绩管理系统(QT项目)
- 【sdx62】PBL阶段修改GPIO操作
- Java8 JVM运行时数据区概述 (极其详细长文)
- user()与current_user()
- 摘录--《人间》余秀华
热门文章
- 你想要的宏基因组-微生物组知识全在这(190101)
- Nature:全球表层土微生物组群落结构和功能
- Python中将两个列表(list)数据zip起来
- Error in variable_response could not find function “variable_response“
- R语言为dataframe添加新的数据列(横向拼接、Appending columns,Unioning columns):使用R原生方法、data.table、dplyr等方案
- R语言file_path_sans_ext函数剔除文件后缀实战
- python绘制影像组学训练集、测试集对应的ROC曲线以及瀑布图(rad-score 瀑布图)
- 使用神经网络做二分类,输出层需要几个神经元?应该选择哪一种激活函数?如果要处理minst数据、输出层需要几个神经元?使用那种激活函数?如果使用神经网络预测房价,输出层需要几个神经元、使用什么激活函数?
- 聚类算法是什么?聚类(clustering)有哪些常用的评估方法?评估方法的公示是什么?轮廓系数(Silhouette Coefficient)、平方根标准误差、R方、ARI分别是什么?
- KD树和LSH局部敏感哈希