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'){
				return
				var dv = $(e.target).parent()
			}
			let _this = this
			let top = `${e.clientY+10}px`
			let left = `${e.clientX-50}px`
			dv.parent().css({
				position:'absolute',
				top: top,
				left: left
			})
		    this.isDown = true
		    document.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。爱你们。