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

除了程序员。

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

于是找轮子-->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。爱你们。

Logo

前往低代码交流专区

更多推荐