javaScript拖拽原理的分析与实现
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('box1');
//console.info(getPos(oDiv).leftX);//测试可以
//三个事件
//兼容性没有做判断
//通过以下两种可实现ie7及以下浏览器的兼容
//setCapture全局捕获 再释放捕获
//return false
//以前两种可实现兼容性问题，并没有用浏览器做兼容实验 所用版本，chrome 40几来着记不清了
//也可做函数封装drag
oDiv.onmousedown=function(){
//当触发鼠标down事件时才能触发其它两事件
var e=window.event||evt;
var disX=e.clientX-getPos(oDiv).leftX;
var disY=e.clientY-getPos(oDiv).topY;
//oDiv.onmousemove拖快了会出现bug，调下就知道
document.onmousemove=function(evt){
var e=window.event||evt;
//限定拖的范围
//磁性吸引 当靠近左边框100内自动跑到左边
var L=e.clientX-disX;
var T=e.clientY-disY;
if(T<0){
T=0;
}
if(L<100){
L=0;
}
oDiv.style.left=L+'px';
oDiv.style.top=T+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
};
};
};
//封装一个获得绝对位置的函数
function getPos(obj){
var pos={
"leftX":0,
"topY":0
};
while(obj){
pos.leftX+=obj.offsetLeft;
pos.topY+=obj.offsetTop;
obj=obj.offsetParent;
}
return pos;
}
</script>
<style>
#box1{width:100px;height:100px;background:#C33;position:absolute;}
</style>
</head>
<body>
<div id='box1'>
</div>
</body>
//到此结束 相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22