js的拖拽
首先,在了解拖拽的原理之前,我们需要认识几个知识点(BOM三大系列),获取鼠标的位置,获取元素的位置
offset系列:获取元素的占位宽高(content + padding + border)
名称 | 解释 |
---|---|
offsetWidth | 获取元素的宽度,使用语法 : 标签.offsetWidth |
offsetHeight | 获取元素的高度,使用语法 : 标签.offsetWidth |
offsetTop | 获取当前元素的顶部到定为父元素的距离,没有定位父元素到body的距离 |
offsetLeft | 获取当前元素的左边到定为父元素的距离,没有定位父元素到body的距离 |
client 可视系列(content + padding)
名称 | 用法 |
---|---|
clientWidth | 获取可视化宽度,就是能够直观看到的元素的宽度 (包括元素的自身content + padding)不包括border 语法:元素.clientWidth |
clientHeight | 获取可视化高度,就是能够直观看到的元素的高度度 (包括元素的自身content + padding)不包括border 语法:元素.clientHeight |
获取屏幕的可视化宽度 | document.documentElment.clientWidth |
获取屏幕的可视化高度 | document.documentElment.clientHeight |
clientTop | 获取元素的上边框 |
clientLeft | 获取元素的下边框 |
scroll 滚动系列
名称 | 用法 |
---|---|
scrollWidth | 获取元素实际内容宽度 元素.scrollWidth |
scrollHeight | 获取元素实际内容高度 元素.scrollHeight |
scrollLeft | 获取元素被卷去的宽度 元素.scrollLeft |
scrollTop | 获取元素被卷去的高度 元素.scrollTop |
获取页面的滚动距离 | document.docuementElement.scrollTop || document.body.scrollTop |
2.在做元素拖拽之前,需要知道几个事件,分别是 鼠标按下(onmousedown)、鼠标移动(onmousemove)、鼠标松开(onmouseup)
下面过程可能繁琐,但是要耐心观看哟!
我们知道给一个元素添加多个事件,在不采用事件绑定的情况下,事件函数是会被覆盖的,所以我们使用普通事件处理函数时,不给同元素添加事件,下面进行分析
鼠标按下那一刻,我们需要获取鼠标的位置,然后移动鼠标时改变元素的top和left值,
var wrap = document.getElementsByTagName("div")[0];
wrap.onmousedown=function(event)
{
document.onmousemove=function(event)
{
var ev = window.event || event //兼容写法兼容火狐早期事件对象
var cx = ev.clientX; //水平鼠标位置
var cy = ev.clientY; //数值鼠标位置
wrap.style.top = cy + "px";
wrap.style.left = cx + "px"
}
}
document.onmouseup=function()
{
document.onmousemove = null; //鼠标松开取消移动时候的效果
}
当移动的时候,把鼠标的位置,给到元素的left和top值。但是会有一个问题,点击元素会出现元素变动的问题。可以看一下,这一问题。
分析出现这一情况的问题。
>按照上面的问题进行修改后
var wrap = document.getElementsByTagName("div")[0];
wrap.onmousedown=function(event)
{
var ev = window.event || event;
var cx = ev.clientX; //水平鼠标位置
var cy = ev.clientY; //数值鼠标位置
var oh = cy - wrap.offsetTop;
var ol = cx - wrap.offsetLeft;
document.onmousemove=function(event)
{
var ev = window.event || event //兼容写法兼容火狐早期事件对象
var cx = ev.clientX; //水平鼠标位置
var cy = ev.clientY; //数值鼠标位置
wrap.style.top = cy - oh+ "px";
wrap.style.left = cx - ol+ "px"
}
}
document.onmouseup=function()
{
document.onmousemove = null; //鼠标松开取消移动时候的效果
}
最终效果