vue可视化拖拽组件模板,vuejs可视化拖拽布局

　　本文主要介绍vue可视化拖拽页面编辑器的方法，帮助大家更好的理解和使用Vue。感兴趣的朋友可以了解一下。

拖拽实现

拖拽事件

　　这里使用H5的拖动事件主要使用：

　　Dragstart //开始拖动元素时触发

　　drag//指定可以拖动的元素。

　　Dragend //当拖动操作结束时触发

　　Dragover //当拖动元素在可释放目标上移动时触发

　　Drop //当拖动的元素在可释放的目标上被释放时触发

　　让我们看看如何使用这些事件：

　　！-拖放元素列表数据-

　　脚本

　　//com是对应的视图组件，显示在发布区。

　　类型列表：{

　　横幅：{

　　名称：“旋转木马”，

　　图标：“el图标图片”，

　　com:横幅

　　产品：{

　　名称：商品，

　　图标：“el-icon-s-goods”，

　　com:产品

　　图像：{

　　名称：图片，

　　图标：“el图标图片”，

　　com:图片

　　}

　　/脚本

　　！-拖放元素-

　　保险商实验所

　　@dragstart=dragStart

　　@dragend=dragEnd

　　里

　　类型列表中的v-for=(val，key，index

　　可拖动的

　　:数据类型=key

　　:key=索引1

　　span:class=" val . icon "/span

　　p{{val.name}}/p

　　/李

　　/ul

　　！-释放区域-

　　差异

　　class=查看内容

　　@drop=drog

　　@dragover=dragOver

　　/div

拖拽开始

　　定义一个变量类型，用于确定拖动事件开始时当前拖动元素的类型，例如，产品和广告图片。

　　//拖动类型

　　dragStart(e) {

　　this . type=e . target . dataset . type

　　}

　　确定类型后，进入下一个发布区域。

在释放区域中移动

　　在移动的过程中，你需要根据鼠标位置实时计算拖拽元素的位置。可以向下滚动预览动画效果！

　　//view-content :外部框的类，直接推送

　　//item :盒子内部的元素，其位置需要计算和转换。

　　dragOver() {

　　让className=e.target.className

　　let name=className！==查看-内容？项目:查看-内容

　　//组件的默认数据

　　常量默认值数据={

　　Type: this.type，//组件类型

　　状态：2，//默认状态

　　数据：[]，//基础数据

　　选项：{} //其他操作

　　}

　　if (name==view-content) {

　　//.

　　} else if (name==item) {

　　//.

　　}

边界处理、角度计算

　　核心变量：

　　是：被拖动的元素是否已经被推入页面数据。

　　Index:被拖动元素的最终索引值。

　　CurIndex:鼠标所在元素的索引值。

　　方向：鼠标元素的上/下部分。

　　当name==view-content 时，表示拖动的元素在外层，是一个空白的可释放区域。如果没加，直接推就行了。

　　if (name==view-content) {

　　如果(！this.isPush) {

　　this.index=this.view .长度

　　this.isPush=true

　　this.view.push(defaultData)

　　}

　　当name==item ，即在现有元素之上时，需要计算位置、上/下以及添加或移动。

　　if (name==item) {

　　让目标=e .目标

　　设[ y，h，curIndex ]=[ e.offsetY，target.offsetHeight，target.dataset.index ]

　　Let direction=y (h/2) //计算鼠标在当前元素中的位置，以确定被拖动元素的上/下。

　　如果(！this.isPush) {

　　//首先

　　如果(方向){

　　if (curIndex==0) {

　　this.view.unshift(defaultData)

　　}否则{

　　this.view.splice(curIndex，0，defaultData)

　　}

　　}否则{

　　curIndex=curIndex 1

　　this.view.splice(curIndex，0，defaultData)

　　}

　　}否则{

　　//移动

　　如果(方向){

　　var i=curIndex==0？0 : curIndex - 1

　　var result=this . view[I][ status ]==2

　　}否则{

　　var i=curIndex 1

　　var result=this . view . length I this . view[I][ status ]==2

　　}

　　//需要改变拖动元素的位置吗？

　　if(结果)返回

　　const temp=this . view . splice(this . index，1)

　　this.view.splice(curIndex，0，temp[0])

　　}

　　This.index=curIndex //拖动元素位置

　　This.ispush=true //输入时推送，即true

　　}

　　第一：如果不是push，则根据当前索引和方向确定被拖动元素的位置。

　　移动：推送和移动状态，根据当前索引和方向找出对应值的状态，是否是拖动一个元素，如果是，则返回，否则，改变位置。

　　总结一下：获取当前鼠标所在元素的索引，然后计算鼠标是在元素的上部还是下部，从而推断出拖动元素的位置！

　　小问题：

　　以上name==item ，事件事件需要屏蔽默认事件，以免目标是内部元素，导致无法计算位置。但是，只使用事件阻止在这里行不通，我也不知道为什么。您需要添加。具有指针事件属性的项目：无！

　　预防默认()

　　大肠杆菌停止繁殖。项目部门{

　　指针事件：无；

　　}

拖拽结束

　　即释放鼠标或离开释放区域，将恢复默认状态。

　　地位在这里的作用是什么？

　　上面的计算规则用于确定元素是否是拖动元素。

　　页面的显示方式，拖动时只显示组件名称，释放后恢复正常显示内容。

　　//结束拖动

　　dragEnd(e)

　　这个。$delete(this.view[this.index]， status )

　　this.isPush=false

　　this.type=null

　　//已经放置在指定的位置

　　drog(e)

　　预防默认()

　　大肠杆菌停止繁殖

　　this.dragEnd()

内容块拖拽实现

　　因为时间原因，我在这里偷懒了，用了一个完美的列表拖拽插件Vue。可拖动(star 14.2k)。

　　学了一段时间，它的逻辑和上面实现的拖拽有关，具体实现方法也差不多。相信有了以上实战案例，你一定能做到！

　　你为什么不试试呢？

　　根据Vue的用法。Draggable，可以实现一个拖动组件，它会使用(drag，slot，DOM)等操作。

　　(以后有空再回来包一个)

组件划分

　　中间的视图组件，右边的编辑组件，是集合，所以是集合，所以是集合！

　　Page=index管理整个页面的内容。

　　组件

　　编辑##右边编辑

　　信息#基本信息

　　图片#广告图

　　产品#商品

　　&索引#管理编辑组件的信息

　　视图##中间视图

　　横幅#旋转木马

　　图片#广告图

　　产品#产品列表

　　佩奇

　　索引# #主页

　　要预览页面，只需要使用components=View下面的组件，和page=index一样，不需要太多的修改！

数据结构的定义

　　要实现一个明亮的、可扩展的功能，定义一个合格的数据结构是必不可少的！同时也能决定你代码的质量！

　　当然还是要看你学了什么，逻辑思维！

　　这里最吸引人眼球的方式就是借用对象的关系，让组件之间的值传递只需要单向传递一次！

　　视图：[

　　{

　　类型：“信息”，

　　标题：“页面标题”，

　　备注：“页面备注”，

　　背景颜色：“红色”

　　{

　　类型：“横幅”，

　　数据：[

　　{url: 1.jpg ，名称：转盘图1 ，链接： 3359转盘跳address.cn cn }，

　　{url: 2.jpg ，名称：旋转木马图2 ，链接： 3359旋转木马跳转address.cn cn }

　　]

　　{

　　类型：“图像”，

　　数据：[

　　{url: 1.jpg ，名称：广告图1 ，链接： 3359广告图跳转Address.cn cn }，

　　{url: 2.jpg ，名称：广告图2 ，链接： 3359广告图跳转Address.cn cn }

　　]

　　{

　　类型：“产品”，

　　数据：[

　　{id: 1 ，名称：商品1 ，图片： 1.jpg}，

　　{id: 2 ，名称：商品2 ，图像： 2.jpg}

　　选项：{

　　OriginalPrice: true，//交叉价格

　　GoodRatio: true，//好评率

　　VolumeStr: false，//销售数量

　　}

　　]

　　是一个数组，数组的项表示一个模块。

　　类型：模块类型

　　数据：基本信息

　　选项：其他操作

　　.可以参考原有的组件模块，根据需要扩展自己的操作。

编辑组件的传值

　　选择视图组件时，将视图中指定的item对象作为参数传递给编辑组件！

　　对象指向同一个内存地址，存在引用关系。只需要修改一次就可以多方向更新数据！

　　section class=r

　　编辑表单

　　:data=props

　　v-if=isRight

　　/EditForm

　　/部分

　　脚本

　　//切换视图组件

　　选择类型(索引){

　　this.isRight=false

　　this.props=this.view[index]

　　这个。$nextTick(()=this.isRight=true)

　　}

　　/脚本

图片上传

　　刚好上面有图片上传组件。在这里，分享一下我的使用技巧！

　　用Element-ui自带上传组件的朋友，看过来(敲黑板)

　　让我们先实现一个简化版本：

　　！-禁用所有默认方法-

　　El-上传

　　:http-request=upload

　　:show-file-list=false

　　多个的

　　行为

　　img :src=item.url v-for=(item，index) in list :key=index

　　/El-上传

　　脚本

　　上传(参数){

　　const file=params.file

　　const form=new FormData()；

　　form.append(file ，file)；

　　form.append(clientType ， multipart/form-data )；

　　Const index=this.imageIndex //编辑图片的索引

　　常量数据={

　　url: URL.createObjectURL(文件)，

　　形式

　　}

　　如果(索引！==null) {

　　//this.list=图片收藏

　　这个。$set(this.list，index，data)

　　}否则{

　　this.list.push(数据)

　　}

　　/脚本

　　上传方法

　　使用URL.createObjectURL(file)创建本地预览地址。

　　保存表单对象，并在提交时上传。

　　//根据上面的代码，使用Promise实现上传功能。

　　const request=[]

　　this.list.forEach(item={

　　请求.推送(

　　新承诺((解决，拒绝)={

　　/**

　　*上传界面

　　*替换原来的网址

　　*删除表单

　　imageUpload(item.form)。然后(res={

　　item.url=res.data.url

　　删除项目.表单

　　解析(分辨率)

　　}).catch(错误={

　　拒绝(错误)

　　})

　　)

　　})

　　Promise.all(请求)。然后(res={

　　//.使服从.

　　})

　　等到最后一步提交数据，然后上传所有图片，上传完成后再调用提交数据的接口！

　　在使用表单提交多个数据的情况下，这是最正确的做法！

最后总结

　　其实并不复杂。重点在于数据结构的定型，组件交互的处理，逻辑模式的规划，只要实现了这一步的核心点。

　　其他的，比如添加组件，添加操作等等，都是可扩展操作，剩下的问题都不再是问题了！

　　这只能算是一个简化版，可以根据自己的需求进行优化，琢磨，完善，吸收到自己的知识中去！

　　至少我满足了工作需要，哇哈哈哈哈~ ~ ~

　　更多详情请查看源代码，Github地址，感谢各位明星。我是不喝茶的李白。

　　以上是Vue的可视化拖拽页面编辑器的详细内容。更多关于Vue的可视化拖拽页面编辑器的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

vue可视化拖拽组件模板,vuejs可视化拖拽布局

目录

拖拽实现

拖拽事件

拖拽开始

在释放区域中移动

边界处理、角度计算

拖拽结束

内容块拖拽实现

组件划分

数据结构的定义

编辑组件的传值

图片上传

最后总结

相关文章阅读