关于拖拽

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拖拽特性实现:“移动”部分的更多相关文章

  1. 一个全新的Vue拖拽特性实现:“调整尺寸”部分

    关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对调整尺寸的开发进行阐述 关于移动的开发,请参见:拖拽:移动 演示 开发步骤 下面以模块test-party为例, ...

  2. Vue拖拽组件

    vue开发公众号项目,***产品需要添加一个新的功能.拖拽功能.一听简单.百度上轮子挺多,直接拉一个过来用着就行.然鹅...兴奋之余,却失望至极.东西很多,没有一个能使得.你让我失望,那我就让你绝望. ...

  3. vue拖拽组件开发

    vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...

  4. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

    这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...

  6. 使用TypeScript给Vue 3.0写一个指令实现组件拖拽

    最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考 ...

  7. vue2-dragula vue拖拽组件

    https://github.com/kristianmandrup/vue2-dragula git 地址 https://github.com/kristianmandrup/vue2-dragu ...

  8. Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  9. Vue 拖拽组件 vuedraggable 和 vue-dragging

    一.描述 之前用 vue 写过一个在线的多二维码生成服务,体验地址:https://postbird.gitee.io/vue-online-qrcode/ 后面发现二维码多了之后有时候想要排序,需要 ...

随机推荐

  1. 数据库number(4,3)表示什么

    1 你看 number(4,3)是表示 这个数 一共有4位是有效位,后面的3 表示有3个是小数也就是这个数 只能是1.234,这样格式的 最大只能是9.999,2 number(3,4) 表示这个数 ...

  2. LibreOffice(开源免费办公软件)

    LibreOffice(开源免费办公软件) 官方地址 中文网站:https://zh-cn.libreoffice.org/ 下载地址: https://zh-cn.libreoffice.org/d ...

  3. Java基础之浅谈集合

    Java基础知识.关于List.Set.Map接口的了解,以及ArrayList.LinkedList.HashSet.TreeSet.HashMap.TreeMap...

  4. 小天才XTC Z1S开启ADB

    起因 最近入手了Apple Watch,但因系统闭源和国区App Store第三方应用实在是少,所以就开始折腾起安卓表来了.正好家里有块给小孩子用的小天才手表,所以就想到了通过ADB调试安装一些这块表 ...

  5. 记录,element ui的日期选择器只有第一次回显成功

    首先是这个 <el-date-picker v-model="value1" type="daterange" range-separator=" ...

  6. 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 ...

  7. python基础练习题(题目 学习使用auto定义变量的用法)

    day28 --------------------------------------------------------------- 实例042:变量作用域 题目 学习使用auto定义变量的用法 ...

  8. 浅谈 TCP、IP、DNS 和 HTTP 的关系

    一.浅谈三个协议的基本概念 1.IP 协议 按层次分,IP网际协议位于网络层,几乎所有的网络的系统都会用到 IP 协议,其重要性非同一般.IP 协议作用就是把各种数据包传送给对方,对方的地址就要看其 ...

  9. python学习-Day23

    目录 今日内容详细 logging模块(续集) 日志模块的主要组成部分 配置字典 配置字典在项目中的使用 第三方模块 如何利用工具下载第三方模块 查看当前解释器下载的第三方模块 下载第三方模块 直接使 ...

  10. IOC容器--1.12. 基于 Java 的容器配置

    用Java的方式配置Spring ,不使用Spring的XML配置,全权交给Java来做 JavaConfig是Spring的一个子项目,在Sring 4  之后成为核心功能 这种纯Java的配置方式 ...