<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="和派孔明——前端工程师" />
<meta name="copyright" content="<span style="font-family: Arial, Helvetica, sans-serif;">和派孔明——前端工程师</span><span style="font-family: Arial, Helvetica, sans-serif;">" /></span>
<title>DIV拖拽解析</title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
#div1{width:200px;height:200px; background:red; position:absolute;left:0;top:0;}
</style>
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
oDiv.οnmοusedοwn=function(ev){
var oEvt=ev||event;
var disX = oEvt.clientX - oDiv.offsetLeft;
var disY = oEvt.clientY - oDiv.offsetTop;
document.οnmοusemοve=function(ev){
var oEvt=ev||event;
oDiv.style.left=oEvt.clientX-disX+'px';
oDiv.style.top=oEvt.clientY-disY+'px';
};
document.οnmοuseup=function(){
document.οnmοusemοve=null;//不要粘着我
document.οnmοuseup=null;//性能考虑
oDiv.releaseCapture && oDiv.releaseCapture();//释放截获
};
oDiv.setCapture && oDiv.setCapture();//事件截获
return false;//阻止默认
};
};
</script>
</head>
<body>
dfasdfasdf<br>
<p>asdfasd234234234</p>
<div id="div1">
asdfasdfasdf<img src="a3.png">
</div>
</body>
</html>
扫一扫
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
