html5 draggable组件拖动自由布局的实现

2024-06-19 04:12

本文主要是介绍html5 draggable组件拖动自由布局的实现,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如何使元素支持拖动

实现组件的自由拖动的核心就是 html5 中新添加的全局属性 draggable 属性,该属性规定了元素是否可进行拖动。属性值如下所示:

  • true:规定元素的可拖动的
  • false:规定元素不可拖动
  • auto:使用浏览器的默认行为

当我们在元素元素标签中添加 draggable 属性时,该元素就可以进行拖动操作了。

<div draggable > 可拖动的元素 </div>

拖动事件

事件分类

元素可以进行拖动了,我们就可以通过元素的拖动事件进行拖动开始-结束的一些逻辑控制了,拖动事件主要分为两个类别,一类是拖动元素可以触发的:

  • dragstart:鼠标点中元素并且开始移动时触发
  • drag:拖拽过程中持续触发
  • dragend:拖拽结束松开鼠标时触发

另一类是,是当拖拽元素到某个目标元素时,目标元素会触发的:

  • dragenter:拖拽元素到目标上时触发
  • dragover:拖动元素在目标元素中,持续触发
  • dragleave:离开目标元素时触发
  • drop:拖放元素到了目标元素中松开鼠标时触发

拖动放置行为

在拖动事件中,我们会获取到拖动的事件对象 (e),在拖动对象中我们能获取到一个重要的属性 dataTransfer ,我们可以通过 dataTransferdropEffect 属性控制被拖动的元素的放置行为,其值的说明如下所示。

  • none:不能把元素拖放至此
  • move:移动到目标
  • copy:复制到目标
  • link:目标打开拖动元素(拖动元素必须是链接并有URL)

页面设计器的实现

下面我们根据以上的知识点来实现一下页面设计器组件拖动的最简demo。 首先我们定义一下组件列表和画布区域

<template><div><!-- 左侧组件列表 --><div class="left"><divclass="left-item"v-for="item in list1":key="item.code"draggable>{{ item.name }}</div></div><!-- 画布区域 --><div class="targetContent" ref="targetContent"><divclass="item"v-for="item in list2":key="item.id":ref="item.id":style="{top: `${item.top - 16}px`,left: `${item.left - 85}px`,'z-index': `${item.zIndex}`}"><template v-if="item.code === 'MyInput'"><a-input></a-input></template></div></div></div>
</template>

并将组件列表和画布中的页面分别通过list1,和list进行遍历渲染。

<script>
import _ from "lodash";
export default {data() {return {list1: [{code: "MyInput",name: "输入框",props: {}}],list2: [],};}
}
</script>

下面我们来分析一下如何实现将组件列表中的组件拖动到画布中,上文中我们讲到,拖动的元素以及目标元素可以设置一系列的事件,那么我们就可以在组件列表渲染时,为每个组件设置一下 dragstart 事件,在该事件中我们需要做如下处理:

  1. 设置拖动元素的放置行为为移动,即move
  2. 组件在目标元素经过时,必须要阻止默认行为,否则不能触发drop
  3. 设置组件离开目标元素时放置行为为不能拖放,即none
  4. 拖动元素在目标元素松手时添加元素到画布,即将组件元数据添加到list2中,元素所对应的元数据记录也了这个组件在画面中的坐标位置。

然后在dragend事件中取听以上动作。

下面我们通过代码的方式来实现以上过程。首先在组件列表进行遍历时,添加组件的dragstartdragend事件。

@dragstart="e => dragstart(e, item)"
@dragend="dragend"

下面是这两个事件的实现。

dragstart(e, item) {this.dragItem = item;// 设置元素的放置行为——移动this.$refs.targetContent.addEventListener("dragenter", this.dragenter);// 在目标元素经过 必须要阻止默认行为 否则不能触发dropthis.$refs.targetContent.addEventListener("dragover", this.dragover);// 离开目标元素时设置元素的放置行为——不能拖放this.$refs.targetContent.addEventListener("dragleave", this.dragleave);// 拖动元素在目标元素松手时添加元素到画布this.$refs.targetContent.addEventListener("drop", this.drop);
},
dragend(e) {this.$refs.targetContent.removeEventListener("dragenter", this.dragenter);this.$refs.targetContent.removeEventListener("dragover", this.dragover);this.$refs.targetContent.removeEventListener("dragleave", this.dragleave);this.$refs.targetContent.removeEventListener("drop", this.drop);
},
dragenter(e) {e.dataTransfer.dropEffect = "move";
},
dragover(e) {e.preventDefault();
},
dragleave(e) {e.dataTransfer.dropEffect = "none";
},
drop(e) {const { code } = this.dragItem;this.list2.push({top: e.offsetY,left: e.offsetX,zIndex: 1,code: code,id: Date.parse(new Date())});this.dragItem = null;
}

这样,我们组件列表中的组件就可以拖动到画布中了。

那拖动到画布中的组件又是如何实现通过拖动灵活的移动位置的呢?同样,我们可以将画布中的组件添加mousedown事件,在事件中我们添加mousemove事件的监听,当画布中的组件进行移动时,我们实时的将该被移动元素所对应的元数据坐标进行更新。下面是代码的实现。

mousedown(e, item) {this.moveItem = item;document.addEventListener("mousemove", this.mousemove);document.addEventListener("mouseup", this.mouseup);
},
mousemove(e) {const _this = this;let { clientX, clientY } = e;const moveIdx = _.findIndex(this.list2, function(o) {return o.id === _this.moveItem.id;});let newList2 = _.cloneDeep(this.list2);newList2[moveIdx].top = clientY;newList2[moveIdx].left = clientX;this.list2 = newList2;
},
mouseup(e) {document.removeEventListener("mousemove", this.mousemove);document.removeEventListener("mouseup", this.mouseup);
}

这样画布中的组件也就支持移动啦。

后记

这篇文章中我们实现了页面设计器组件自由布局的最简demo,让大家理解自由拖动的实现原理。至于里面还有一些细节的处理,大家可以根据自己的需要自行实现~对该系列文章感兴趣的小伙伴来一波关注吧。我们会持续与大家分享与交流。

最后我们上一下完整demo代码。

<template><div><!-- 左侧组件列表 --><div class="left"><divclass="left-item"v-for="item in list1":key="item.code"draggable@dragstart="e => dragstart(e, item)"@dragend="dragend">{{ item.name }}</div></div><!-- 画布区域 --><div class="targetContent" ref="targetContent"><divclass="item"v-for="item in list2":key="item.id":ref="item.id":style="{top: `${item.top - 16}px`,left: `${item.left - 85}px`,'z-index': `${item.zIndex}`}"@mousedown="e => mousedown(e, item)"><template v-if="item.code === 'MyInput'"><a-input></a-input></template></div></div></div>
</template><script>
import _ from "lodash";
export default {data() {return {list1: [{code: "MyInput",name: "输入框",props: {}}],list2: [],dragItem: null,moveItem: null};},methods: {dragstart(e, item) {this.dragItem = item;// 设置元素的放置行为——移动this.$refs.targetContent.addEventListener("dragenter", this.dragenter);// 在目标元素经过 必须要阻止默认行为 否则不能触发dropthis.$refs.targetContent.addEventListener("dragover", this.dragover);// 离开目标元素时设置元素的放置行为——不能拖放this.$refs.targetContent.addEventListener("dragleave", this.dragleave);// 拖动元素在目标元素松手时添加元素到画布this.$refs.targetContent.addEventListener("drop", this.drop);},dragend(e) {this.$refs.targetContent.removeEventListener("dragenter", this.dragenter);this.$refs.targetContent.removeEventListener("dragover", this.dragover);this.$refs.targetContent.removeEventListener("dragleave", this.dragleave);this.$refs.targetContent.removeEventListener("drop", this.drop);},dragenter(e) {e.dataTransfer.dropEffect = "move";},dragover(e) {e.preventDefault();},dragleave(e) {e.dataTransfer.dropEffect = "none";},drop(e) {const { code } = this.dragItem;this.list2.push({top: e.offsetY,left: e.offsetX,zIndex: 1,code: code,id: Date.parse(new Date())});this.dragItem = null;},mousedown(e, item) {this.moveItem = item;document.addEventListener("mousemove", this.mousemove);document.addEventListener("mouseup", this.mouseup);},mousemove(e) {const _this = this;let { clientX, clientY } = e;const moveIdx = _.findIndex(this.list2, function(o) {return o.id === _this.moveItem.id;});let newList2 = _.cloneDeep(this.list2);newList2[moveIdx].top = clientY;newList2[moveIdx].left = clientX;this.list2 = newList2;},mouseup(e) {document.removeEventListener("mousemove", this.mousemove);document.removeEventListener("mouseup", this.mouseup);}}
};
</script>
<style lang="less" scoped>
.left {padding: 10px;position: absolute;width: 270px;background: rgb(247, 202, 202);top: 0;bottom: 0;left: 0;
}
.left-item {height: 100px;line-height: 100px;background: #fff;
}
.targetContent {background: rgb(173, 244, 247);height: 100vh;padding: 0 270px;
}
.item {position: absolute;
}
</style>

附送250套精选项目源码

源码截图

 源码获取:关注公众号「码农园区」,回复 【源码】,即可获取全套源码下载链接

这篇关于html5 draggable组件拖动自由布局的实现的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1073974

相关文章

Redis客户端连接机制的实现方案

《Redis客户端连接机制的实现方案》本文主要介绍了Redis客户端连接机制的实现方案,包括事件驱动模型、非阻塞I/O处理、连接池应用及配置优化,具有一定的参考价值,感兴趣的可以了解一下... 目录1. Redis连接模型概述2. 连接建立过程详解2.1 连php接初始化流程2.2 关键配置参数3. 最大连

Python实现网格交易策略的过程

《Python实现网格交易策略的过程》本文讲解Python网格交易策略,利用ccxt获取加密货币数据及backtrader回测,通过设定网格节点,低买高卖获利,适合震荡行情,下面跟我一起看看我们的第一... 网格交易是一种经典的量化交易策略,其核心思想是在价格上下预设多个“网格”,当价格触发特定网格时执行买

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法:临时设置(Windows用`set`,Linux/macOS用`export`)、永久设置(系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量(适用于当前会话)永久设置环境变量(Windows系统

Python对接支付宝支付之使用AliPay实现的详细操作指南

《Python对接支付宝支付之使用AliPay实现的详细操作指南》支付宝没有提供PythonSDK,但是强大的github就有提供python-alipay-sdk,封装里很多复杂操作,使用这个我们就... 目录一、引言二、准备工作2.1 支付宝开放平台入驻与应用创建2.2 密钥生成与配置2.3 安装ali

Spring Security 单点登录与自动登录机制的实现原理

《SpringSecurity单点登录与自动登录机制的实现原理》本文探讨SpringSecurity实现单点登录(SSO)与自动登录机制,涵盖JWT跨系统认证、RememberMe持久化Token... 目录一、核心概念解析1.1 单点登录(SSO)1.2 自动登录(Remember Me)二、代码分析三、

PyCharm中配置PyQt的实现步骤

《PyCharm中配置PyQt的实现步骤》PyCharm是JetBrains推出的一款强大的PythonIDE,结合PyQt可以进行pythion高效开发桌面GUI应用程序,本文就来介绍一下PyCha... 目录1. 安装China编程PyQt1.PyQt 核心组件2. 基础 PyQt 应用程序结构3. 使用 Q

Python实现批量提取BLF文件时间戳

《Python实现批量提取BLF文件时间戳》BLF(BinaryLoggingFormat)作为Vector公司推出的CAN总线数据记录格式,被广泛用于存储车辆通信数据,本文将使用Python轻松提取... 目录一、为什么需要批量处理 BLF 文件二、核心代码解析:从文件遍历到数据导出1. 环境准备与依赖库

linux下shell脚本启动jar包实现过程

《linux下shell脚本启动jar包实现过程》确保APP_NAME和LOG_FILE位于目录内,首次启动前需手动创建log文件夹,否则报错,此为个人经验,供参考,欢迎支持脚本之家... 目录linux下shell脚本启动jar包样例1样例2总结linux下shell脚本启动jar包样例1#!/bin

go动态限制并发数量的实现示例

《go动态限制并发数量的实现示例》本文主要介绍了Go并发控制方法,通过带缓冲通道和第三方库实现并发数量限制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录带有缓冲大小的通道使用第三方库其他控制并发的方法因为go从语言层面支持并发,所以面试百分百会问到

Go语言并发之通知退出机制的实现

《Go语言并发之通知退出机制的实现》本文主要介绍了Go语言并发之通知退出机制的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1、通知退出机制1.1 进程/main函数退出1.2 通过channel退出1.3 通过cont