码迷,mamicode.com
首页 > 其他好文 > 详细

完美拖拽思路

时间:2015-06-19 13:17:19      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="copyright" content="智">
<title></title>
<style>
* { margin:0; padding:0; }
#div1 { position:absolute; top:100px; left:100px; width:200px; height:200px; background:#ccc; }

.like { position:absolute; top:100px; left:100px; width:192px; height:192px; border:4px dashed red; }
</style>
<script>
window.onload=function (){
var oDiv=document.getElementById(‘div1‘);
drag(oDiv);
};

function drag(obj)
{
obj.onmousedown=function (ev){
var oEvent=ev || event;//ev具有兼容性问题,ev是兼容高板本浏览器ie9-10 FF CH,而event则是兼容非火狐浏览器,也就是兼容CH IE6-10
var disX=oEvent.clientX-obj.offsetLeft;
var disY=oEvent.clientY-obj.offsetTop;

document.onmousemove=function (ev){
var oEvent=ev || event;

obj.style.left=oEvent.clientX-disX+‘px‘;
obj.style.top=oEvent.clientY-disY+‘px‘;
};

document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;

obj.releaseCapture && obj.releaseCapture();
};

// 低版本IE使用
obj.setCapture && obj.setCapture();
// 高级使用
return false;
};
}
</script>
</head>

<body>
adsflhdsaflkhsafd
<div id="div1">aaaaa</div>
</body>
</html>

 

完美拖拽思路

标签:

原文地址:http://www.cnblogs.com/wangjiantao112/p/4588304.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!