懒人拖拽

亲们有没有理解拖拽呢?拖拽是js中很简单的一个效果,当然,你在理解它的原理后也可以做出挺炫的效果,今天我们就来说说怎样实现简单的拖拽吧!
首先我们都应该知道实现拖拽要用的事件有哪三个onmousedwn,onmousemove,onmouseup  不知道这三个事件的,后边会介绍到,也可以自行去补习噢!
懒人拖拽_第1张图片
图片发自App

大家千万一定要记住了,要拖拽必须让这个元素脱离文档流,也就是说一定要定位

有多少人刚开始实现拖拽时因为这个而耽误了不少时间,应该不会是我一个人吧,要只有我一个那就太尴尬啦



在拖拽这个元素时首先要做的是鼠标按下去,同时获取鼠标相对于元素在xy轴的位置
懒人拖拽_第2张图片
图片发自App
接着来就是鼠标开始移动时,获取鼠标基于浏览器窗口的位置,同时获取元素移动的距离

移动的距离=鼠标距窗口的距离-鼠标在元素中的距离

图片发自App
接下来就是最后一步啦,就是鼠标松开时,让元素停止移动
图片发自App

是不是超级简单?小伙伴们快去实现更炫酷的效果吧

懒人拖拽_第3张图片
图片发自App

你可能感兴趣的:(懒人拖拽)