Vue 实现拖拽模块(一)拖拽添加组件

本文主要介绍了vue拖拽组件实现构建页面的简单实现，文中通过示例代码介绍，感兴趣的小伙伴们可以了解一下

本文主要介绍了 Vue拖拽添加组件的简单实现，具体如下：

效果图

实现思路

使用 H5 的新特性拖放操作来实现，拖拽左侧的组件放到右边主体部分，然后主体部分识别拖拽组件加载到盒子中拖拽事件和属性

拖放操作的事件描述

事件名称	事件描述
dragstart	当单击下鼠标，并移动之后执行。
drag	在dragstart执行之后，鼠标在移动时连续触发。
dragend	当拖拽行为结束，也就是松开鼠标的时候触发。
dragenter	当正在拖拽的元素的标记进入某个Dom元素时触发，自身首先会触发。被进入的Dom元素会触发这个事件。
dragover	当拖拽的元素的标记在进入的Dom元素上移动时触发，在自身移动时也会触发。
dragleave	当拖拽的元素在离开进入的Dom时触发。

H5拖拽属性 draggable

draggable：当需要某个元素可以拖拽时，需设置为true，默认为false。选中的文本、图片、链接默认可以拖拽。

DataTransfer对象：该属性用于保存拖放的数据和交互信息，通过 event 事件进行绑定属性和读取属性。
event.dataTransfer.getData(“绑定的属性名”);
event.dataTransfer.setData(“属性名”, “属性值”);

实现过程

给拖拽组件绑定 dragstart 事件用于监听拖拽开始
给拖拽组件添加 draggable=“true” 用于开启元素拖拽
给拖拽组件绑定 dragover.prevent 用于阻止浏览器默认行为, 不然会显示一个X，加上后在鼠标拖拽时会显示一个添加的小按钮
在 dragstart 触发的时候，需要把事件对象和当前数据传到方法中
把当前数据转换为字符串，并通过event.dataTransfer.setData() 方法，设置到 dataTransfer 对象中
给目标元素绑定 drop 事件，监听拖拽组件放到了当前元素中并使用event.dataTransfer.getData() 获取event对象上班绑定的拖拽元素的数据，保存到拖拽后的数组，然后把获取鼠标位置,将拖拽元素加载到鼠标放下的位置。
给拖拽元素绑定 dragover.prevent 用于阻止默认行为

完整代码

<template><div class="box"><!-- 左侧拖拽组件 --><div class="drap"><!-- @dragstart  < -- 是元素开始拖拽的时候触发draggable="true"  < -- 为了使元素可拖动，把 draggable 属性设置为 true ：@dragover.prevent < -- 阻止浏览器默认行为，不然会显示一个叉叉，不好看, 加上会显示一个添加的符号--><divv-for="(item, index) in drapLeftElList"class="drap-item":key="index"@dragstart="handleDrapEvList($event, item)"@dragover.preventdraggable="true"><imgclass="drap-item-img"draggable="false":src="item.imgUrl":alt="item.name"/><div class="drap-item-name">{{ item.name }}</div></div></div><!-- 主体部分 --><div class="drap-container" @dragover.prevent @drop="handleDrap"><!-- @mousedown.stop="handleMouseDown($event, item, index)"@mouseup.stop="handleMouseUp" --><divv-for="(item, index) in componentsList"class="drap-container-item":key="index":style="{ top: `${item.position.y}px`, left: `${item.position.x}px` }"@click="handleClick(item, index)"><img class="drap-item-img" :src="item.imgUrl" :alt="item.name" /><div class="drap-item-name">{{ item.name }}</div></div></div><!-- 属性配置 --><div class="drap-right" style="width: 300px">属性配置{{ identifier }}{{ curControl }}</div></div>
</template><script>
export default {name: "drap",data() {return {// 保存拖拽的元素的列表componentsList: [],//   元件库drapLeftElList: [{id: 11,name: "团队1",imgUrl:"http://img2.3png.com/68604d0c41a6cbc132055d03bbfade602ff7.png",sort: 1,position: {x: 0,y: 0,},},{id: 13,name: "团队2",imgUrl:"http://img2.3png.com/68604d0c41a6cbc132055d03bbfade602ff7.png",sort: 2,position: {x: 0,y: 0,},},{id: 14,name: "团队3",imgUrl:"http://img2.3png.com/68604d0c41a6cbc132055d03bbfade602ff7.png",sort: 3,position: {x: 0,y: 0,},},{id: 15,name: "团队4",imgUrl:"http://img2.3png.com/68604d0c41a6cbc132055d03bbfade602ff7.png",sort: 3,position: {x: 0,y: 0,},},],identifier: "", // 当前项的 唯一标识curControl: null, // 当前点击的是哪个组件};},methods: {handleDrapEvList(event, value) {let { offsetX, offsetY } = event;var infoJson = JSON.stringify({...value,position: {...value.position,x: offsetX,y: offsetY,},});//   将数据绑定到dataTransfer身上event.dataTransfer.setData("drapData", infoJson);},// 监听拖拽元素结束handleDrap(event) {event.preventDefault();const value = event.dataTransfer.getData("drapData");//   获取绑定到拖拽元素身上的 drapData属性if (value) {let drapData = JSON.parse(value);// 获取指定鼠标在拖拽组件身上点击的位置const { position } = drapData;const identifier = Math.floor(Math.random() * 10000);// 获取当前鼠标拖拽结束的位置const {offsetX, offsetY} = eventthis.componentsList.push({...drapData,identifier,position: {...position,// 用鼠标拖拽结束的位置减去鼠标在元素上点击的位置, 就得到拖拽元素放置的当前位置x: offsetX - position.x,y: offsetY - position.y,},});}},// 点击元素获取组件配置handleClick(row, index) {this.identifier = row.identifier;this.curControl = row;},},
};
</script><style lang="scss">
.box {display: flex;flex-direction: row;align-items: center;height: 500px;overflow: hidden;.drap {width: 300px;height: 500px;background: #f2f2f2;display: flex;flex-direction: row;flex-wrap: wrap;cursor: pointer;.drap-item {height: 120px;margin-right: 20px;.drap-item-img {display: block;width: 80px;height: 80px;}.drap-item-name {text-align: center;}}}.drap-container {flex: 1;height: 500px;background: #ccc;position: relative;.drap-container-item {-webkit-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;position: absolute;user-select: none;.drap-item-img {display: block;width: 80px;height: 80px;}.drap-item-name {text-align: center;}}}
}
</style>

总结

以上就是今天要分享的内容，本文简单介绍了拖拽组件的拖拽功能和目标元素的识别并加载到指定位置

接下来我们会逐步去实现针对拖拽组件的设置位置、设置样式、设置属性、绑定事件等操作

Vue 实现拖拽模块(一)拖拽添加组件相关推荐

Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了拖拽添加组件的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下本文主要介绍了 Vue自定义拖拽组件位置的简单实现,具体 ...
vue拖动改变模板_可视化拖拽 UI 布局之拖拽篇
前言:前段时间负责公司的运营管理后台项目,通过运营后台的PC端拖拽配置布局,达到App首页模板的动态UI界面配置,生成页面.趁着周末,整理一下当时所了解到的拖拽.文章会根据大家的反馈或者自己学习经验的 ...
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
Element UI表格拖拽（vue中） —— 行拖拽、列拖拽
目录安装依赖 vuedraggable 实现拖拽的要点行拖拽要点列拖拽要点完整范例代码安装依赖 vuedraggable 安装 vuedraggable 的同时,会自动安装 sortabl ...
java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
vue 悬浮图标_vue实现可拖拽移动悬浮球
拖拽移动悬浮球需求拆解 1.元素悬浮于全屏 2.元素可拖拽 3.元素拖拽结束后会吸附贴壁 4.元素单击唤出菜单 5.菜单展开时点击空白处关闭菜单 6.菜单不可拖拽 7.元素拖拽时菜单不打开 8.元素 ...
vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置业务需求效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...
element-ui dialog组件添加可拖拽位置可拖拽宽高
有几个点需要注意一下每个弹窗都要有唯一dom可操作指令可以做到拖拽时要添加可拖拽区块 header 由于element-ui dialog组件在设计时宽度用了百分比, 这里不同浏览器有兼容性问题 ...
js控制文件拖拽，获取拖拽内容。
在用户拖拽文件到浏览器的某个元素上时,js可以监听到与拖拽相关的事件,并对拖拽结果进行处理,本文讨论下和拖拽文件相关的一些问题,不过没有处理太多关于兼容性的问题. 拖拽事件 js能够监听到拖拽的事件有 ...

Vue 实现拖拽模块(一)拖拽添加组件

实现思路

实现过程

完整代码

总结

Vue 实现拖拽模块(一)拖拽添加组件相关推荐

最新文章

热门文章