vue中实现菜单栏的拖拽

金秋九月，秋风飒爽，莺莺燕燕，万恶复苏，彼时到处都是一片欣欣向荣的景象，阳光柔和的像是基佬的手，轻轻抚摸在你的屁股上，大家都笑容满面，脸上堆满了油。

除了程序员。

在接到做拖拽菜单栏的时候，我的心里毫无波动甚至还有点想做一个大保健。

于是找轮子-->404。

好吧，果然沙雕网友都靠不住，自己造。

（看了一下物流，我买的鞋子要到了）

前戏已过，进入正题。

首先我们要明确需求：

0 . 菜单栏最多三级，展示形式是文件夹和文件的形式；

1 . 文件夹滑动上去要可以编辑，增加和删除（就是后面出现图标）；

2 . 点击文件夹收缩/展开；

3 . 文件夹只可以拖动到文件夹下面（连同子文件一起），文件随你瞎几把拖；

4 . 修改文件（点击修改的icon后文件夹标签变成input框直接修改，然后保存）；

5 . 炫酷。

好了明确了需求咱们继续。

世界上最远的距离，是我在if里你在else里，虽然经常一起出现，但却永不结伴执行。

刚才看到的话，谁说程序员不浪漫的？？

好了好了，这次真的继续。

别的需求都不难，今天主要讲拖拽。

first：我的英文水平在我们公司还算可以。

two：我们在写html的时候，记得布局要千万写好，保证你的文件夹和你的文件在同一个div里面，这样才能保证拖拽的时候不至于老子跑了儿子还留在原地，这样真的很不好，爱上一匹野马，我的家里没有老王。

third：注意事件的冒泡的捕获宝贝们。

four：其实就一个mousedown的事件，look it：

downLeft(e,id){if(id == -2){return}if(e.target.tagName == 'I' || e.target.tagName == 'IMG'|| e.target.tagName == 'INPUT'){return}if(e.target.tagName == 'DIV'){var dv = $(e.target)}else if(e.target.tagName == 'SPAN'){returnvar dv = $(e.target).parent()}let _this = thislet top = `${e.clientY+10}px`let left = `${e.clientX-50}px`dv.parent().css({position:'absolute',top: top,left: left})this.isDown = truedocument.onmousemove = function(e){if (_this.isDown == false) {return;}let top = `${e.clientY+10}px`let left = `${e.clientX-50}px`dv.parent().css({top: top,left: left})}},

我把整个div变成了定位元素，而不是通常的相对位置，不要问我为什么，我开心。

five：然后鼠标抬起的时候记得重新拉去一下菜单栏，对了mousedown里面还有move事件，是在document下面的呦。

说出来你可能不相信，这篇博客结束了，其实实现起来不难，主要是各个事件的处理。

写博客有点头疼，慢慢来吧。

要完整代码的可以私信我，效果图的也可以私信我，我不想贴了，有点麻烦。

微信号nyyswdwy2。爱你们。

vue中实现菜单栏的拖拽相关推荐

vue中高德地图限制拖拽地图的范围
本文主要分为二维地图和三维地图方法一.首先是二维地图 1.首先要在地图加载完成切中心点已确定的地方获取当前地图边界范围坐标 (我的map用的是全局map) this.logMapBounds() l ...
Vue自定义指令实现弹窗拖拽，四边拉伸及对角线拉伸
Vue自定义指令实现弹窗拖拽,四边拉伸及对角线拉伸引言页面布局 drag.js文件弹窗拖拽实现及边界限制鼠标指针悬停样式四边拉伸及对角线拉伸拉伸干涉引言近期公司vue前端项目需求:实现 ...
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题）
Vue 实现弹框自由拖拽(不出可视范围.解决快速拖动问题) 由于页面中弹框很多,往往会挡住想要查看的内容.从而,有了自由移动拖拽弹框的需求:但在使用的过程中发现,一开始编写的drag.js文件会移出可 ...
vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动
原文地址:vue实现简单的鼠标拖拽横向滚动和鼠标滚轮横向滚动_超人不会飞啊的博客-CSDN博客_vue鼠标拖拽这边如果是动态渲染的div,需要等dom渲染结束后.id存在了.再去设置this.sc ...
vue+flask实现视频合成(拖拽上传)
vue+flask实现视频合成效果如下欢迎访问博客代码哈士奇技术聊天交流群 974178910 前端交流群 535620886 vue+flask实现视频合成拖拽上传我们之前一个文章有写过 ...
中video拖动_【小功能】UE4中实现UI的拖拽
后续文章更新移步→微信公众号"虚幻社区"(mantra-xhsq),您的支持是我创作的动力. 在几乎任何游戏中,都会用到UI的拖拽,尤其是在背包操作中.所以几乎任何一个完整的游戏引 ...
windows主机中的文件无法拖拽到虚拟机的Ubuntu系统中（即使安装了vmtools）
总结记录一下安装Ubuntu虚拟机时遇到的一些麻烦主机:Windows10 虚拟机软件:VMware Workstation 15 Pro 虚拟机镜像:Ubuntu16.04 问题一:安装vmtoo ...
vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置业务需求效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...
vue对文件夹进行拖拽上传完整流程（文件夹中超出100个文件）
前言上个文章介绍了多图片压缩,多图片可以通过直接多选图片进行拖拽,也可以通过直接拖拽文件夹进行解析得到多图片,接下来直接上代码先展示文件拖拽后对文件的解析效果图片文件夹图片文件夹解析大文件夹 ...

vue中实现菜单栏的拖拽

vue中实现菜单栏的拖拽相关推荐

最新文章

热门文章