本博文纯属个人理解、可能与专业知识有出入!!!!!
首先拖拽行为一共触发了三个事件:
鼠标按下—onmousedown
鼠标移动—onmousemove
鼠标弹起—onmouseup
二、事件发生—–>计算事件触发时各种数据的数值和变化
获取对象
var Box=document.getElementById('box');
鼠标点下触发事件:
Box.onmousedown=function(ev){
};
立刻获取点击当前的数据:
var iEvent=ev || event;
var disX=iEvent.clientX;
var disY=iEvent.clientY;
var disW=Box.offsetWidth;
var disH=Box.offsetHeight;
var OFFLeft=Box.offsetLeft;
var OOFTop=Box.offsetTop;
设置感应区为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';
}
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)