可拖动盒子

发现很多都写得比较模糊，对于这个。我还是系统的总结一下。

image

结果是这个图片

1.我们先得进行观察

拖拽行为一共触发了三个事件
鼠标按下—onmousedown
鼠标移动—onmousemove
鼠标弹起—onmouseup

2.对于效果实现方式。

获取信息

获取最开始鼠标开始拖动的位置，x轴位置，y轴位置。怎么获取呢？
我们也要获取盒子的位置，大小等信息。这里只是做一个说明。接下来解释代码。

var Box=document.getElementById('box');//获取我们要拖动的盒子
Box.onmousedown=function(ev){}；//这里是当我们鼠标按下时候，进行读取信息
var iEvent=ev || event; //这里为了考虑兼容性
var disX=iEvent.clientX;//这里读取鼠标按下的x轴位置
var disY=iEvent.clientY;//这里读取鼠标按下的y轴位置
var disW=Box.offsetWidth;//这里读取盒子整个元素的宽度(不包括变宽的宽度)
var disH=Box.offsetHeight;//这里读取盒子整个元素的高度
var OFFLeft=Box.offsetLeft;//相对于最近的祖先定位元素的x距离
var OOFTop=Box.offsetTop;//相对于最近的祖先定位元素的y距离

设置感应区

我们会发现不是所有地方都能拖动，只有在一定的范围内盒子才能拖动

//x值范围在盒子周围20px范围之内
if(iEvent.clientX>Box.offsetLeft+Box.offsetWidth-20){
    Box.style.cursor='w-resize';
    box.style.borderRight='20px solid coral';
    b='right';
};
if(iEvent.clientX<Box.offsetLeft+20){
    Box.style.cursor='w-resize';                        
    box.style.borderLeft='20px solid #de5145';
    b='left';
}
//y值范围在盒子周围20px范围之内
if(iEvent.clientY<Box.offsetTop+20){
    Box.style.cursor='s-resize';
    box.style.borderTop='20px solid #f05b4e';
    b='top';
}
if(iEvent.clientY>Box.offsetTop+Box.offsetHeight-20){
    b='bottom';
    Box.style.cursor='s-resize';
    box.style.borderBottom='20px solid coral';
}