</pre><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖動</title>
<style type="text/css">
#tuod{
position: absolute;
left: 500px;
width: 200px;
height: 200px;
background-color: orange;
}
#title{
margin:0 auto;
width: 200px;
height: 20px;
cursor: pointer;
background-color: black;
}
</style>
<script type="text/javascript">
function $getname(name) {
return document.getElementsByName(name);
}
function $getId(Id) {
return document.getElementById(Id);
}
function $getTagname(Tagname) {
return document.getElementsByTagName(Tagname);
}
var MyObj=null;
var point_x=0;
var point_y=0;
document.οnmοusedοwn=function mouseDown(e) {
//target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口。
if (e.target.className.indexOf("title")!=-1) {
MyObj=e.target.offsetParent;
point_x=e.clientX-MyObj.offsetLeft;//獲取當前事件發生點與邊框的距離
point_y=e.clientY-MyObj.offsetTop;
}
}
document.οnmοusemοve=function move_div(e) {
var Mydiv=$getId("tuod");
if (MyObj) {
Mydiv.style.left=(e.clientX-point_x)+'px';
Mydiv.style.top=(e.clientY-point_y)+'px';
}
}
document.οnmοuseup=function mouseUp() {
MyObj=null;
point_x=0;
point_y=0;
}
</script>
</head>
<body>
<div id="tuod">
<p class="title" id="title"></p>
拖動
</div>
<span id="weizhi"></span>
</body>
</html>
