完美拖拽思路
<!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;
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>
