鼠标拖拽效果分为3个事件
- 鼠标按下事件
onmousedown, 事件源是点击的对象, 就是我们要拖拽的对象 - 鼠标移动事件
onmousemove, 注意下这里, 鼠标移动的时候的事件源就是document - 鼠标抬起事件
onmouseup, 当我们鼠标抬起的时候我们需要把鼠标移动事件清空.
代码如下:
<span class='span' id='span'></span>
.span{
position:absolute;
width: 100px;
height: 100px;
background-color: #0094ff;
cursor:pointer;
}
// 获取到需要拖拽的标签
var span = document.getElementById('span');
// 绑定鼠标按下事件
span.onmousedown = function(event){
var event = event || window.event;
// 计算鼠标按下位置距离元素的左边的距离,
// `offsetLeft`, 就是元素的左边距离元素的`offsetParent`的偏移量
var chaX = event.clientX - span.offsetLeft;
// 计算鼠标按下位置距离元素的上边的距离,
//`offsetTop`, 就是元素的左边距离元素的`offsetParent`的偏移量,
//计算出来的值就是鼠标点击的位置距离元素左边的距离
var chaY = event.clientY - span.offsetTop;
document.onmousemove = function(event){
var event = event || window.event;
/* 元素的定位是通过左上角的left和top来定位,
* 所以我们只需要设置left和top就可以了,
* 但是left和top值我们需要通过鼠标的位置减掉鼠标距离元素左边的距离,
* 这样才能保证我们鼠标点击的位置不变
*/
span.style.left = event.clientX - chaX + 'px';
span.style.top = event.clientY - chaY + 'px';
}
// 给我们最大的事件源绑定鼠标抬起事件, 当抬起的时候, 移除鼠标移动事件.
document.onmouseup = function(){
document.onmousemove = null;
}
}
