主页 个人前端笔记 div任意拖拽代码
admin
发表于2012-11-11 19:03:34    只看楼主 楼主
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
*{margin:0px;padding:0px}
.no-user-select {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
cursor:move;
}
</style>
</head>
<body>
<div id="my" style="width:200px;height:150px;background:#f1fada; ">
<div id="top" style="background:#f4f4f4;cursor:move; ">tip</div>
<div id="bv">this is a test</div>
</div>
<script>
function $(o){
return document.getElementById(o);
}
$("top").onmousedown=function(event){

document.getElementsByTagName('body')[0].className = 'no-user-select';

var x1=event.clientX-$("my").offsetLeft;
var y1=event.clientY-$("my").offsetTop;
var witchButton=false;
if(document.all&&event.button==1){witchButton=true;}
else{if(event.button==0)witchButton=true;}
if(witchButton)
{
$("top").onmousemove=function(event){
$("my").style.position="absolute";
$("my").style.left=event.clientX-x1+"px";
$("my").style.top=event.clientY-y1+"px";
}
$("top").onmouseup=function(){
$("top").onmousemove=null;
document.getElementsByTagName('body')[0].className = '';

}
}
}

</script>
</body>
</html>其中 offsetLeft , offsetTop 具体情况具体分析

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理