<!DOCTYPE html>
<html>
<head>
<title>jane</title>
</head>
<body>
<div style="position:absolute;left:100px;top:100px;250px;background-color:white;border:solid black">
<div style="background-color:gray;border-bottom:dotted black;padding:3px;font-family:sans-serif;font-weight:bold;" onmousedown="drag(this.parentNode,event)">
拖动我
</div>
<p>ceshiceshi ceshi ceshi cehshiskjdlajdfkjakfj</p>
</div>
<script type="text/javascript">
var whenReady = (function(){
var funcs = [];
var ready = false;
function handler(e){
if(ready){
return;
}
if(e.type === "readystatechange" && document.readyState !== "complete"){
return;
}
for(var i = 0; i < funcs.length;i++){
funcs[i].call(document);
}
ready = true;
funcs = null;
}
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",handler,false); //firefox 专有
document.addEventListener("readystatechange",handler,false);
window.addEventListener("load",handler,false);
}
else if(document.attachEvent){
document.attachEvent("onreadystatechange",handler);
window.attachEvent("onload",handler);
}
return function whenReady(f){
if(ready) f.call(document);
else funcs.push(f);
}
}());
// 查询窗口滚动条的位置
function getScrollOffset(w){
w = w || window;
// 除IE8及以前版本不能用
if(w.pageXoffset != null) return{x:w.pageXoffset,y:pageYoffset};
// 对标准模式下的IE（或者任何浏览器）
var d = w.document;
if(document.cmpatMode == "CSS1Compat"){
return{x:d.body.scrollLeft,y:d.body.scrllTop};
}
// 对怪异模式下的浏览器
else{
return{x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
}
}
// 查询窗口的视口尺寸
function getViewportSize(w){
w = w || window;
// 除IE8及以前版本不能用
if(w.innerWidth != null) return{w:w.innerWidth,h:innerHeight};
// 对标准模式下的IE（或者任何浏览器）
var d = w.document;
if(document.cmpatMode == "CSS1Compat")
return{w:d.body.clientWidth,h:d.body.clientHeight};
// 对怪异模式下的浏览器
else{
return{w:d.documentElement.clientWidth,h:d.documentElement.clientHeight};
}
}
// 文档坐标
function getwendang(w){
w = w || window;
var box = w.getBoundingClientRect(); //返回left,top,right,bottom,的视口坐标的位置，内边距+边距。getClientRects,返回内联元素的，只读的类数组对象。
var offsets = getScrollOffset();
return{x:box.left + offsets.x,y:box.top + offsets.y,w:box.width || (box.right - box.left),h:box.height || (box.bottom - box.top)};
}
//拖动绝对定位的html元素
function drag(elementToDrag,event){
var scroll = getScrollOffset();
var startX = event.clientX + scroll.x;
var startY = event.clientY + scroll.y;
var origX = elementToDrag.offsetLeft; //因为elementToDrag是绝对定位，它的offsetParent就是文档body元素。
var origY = elementToDrag.offsetTop;
var deltaX = startX - origX;
var deLtaY = startY - origY;
if(document.addEventListener){ //在document上注册捕获事件处理
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent){
// elementToDrag.setCapture(); console.log(elementToDrag.setCapture);//IE捕获事件通过调用元素上的setCapture();
elementToDrag.attachEvent("onmousemove",moveHandler);
elementToDrag.attachEvent("onmouseup",upHandler);
elementToDrag.attachEvent("onlosecapture",upHandler); //作为mouseup事件看待鼠标捕获的丢失
}
event.stopPropagation ? event.stopPropagation : event.cancelBubble = true;
event.preventDefault ? event.preventDefault : event.returnValue = false;
function moveHandler(e){
if(!e) e = window.event;
var scroll = getScrollOffset();
elementToDrag.style.left = (e.clientX + scroll.x - deltaX) + "px";
elementToDrag.style.top = (e.clientY + scroll.y - deLtaY) + "px";
e.stopPropagation ? e.stopPropagation : e.cancelBubble = true;
}
function upHandler(e){
if(!e) e = window.event;
if(document.removeEventListener){ //在document上注册捕获事件处理
document.removeEventListener("mousemove",moveHandler,true);
document.removeEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent){
elementToDrag.detachEvent("onlosecapture",upHandler);
elementToDrag.detachEvent("onmousemove",moveHandler);
elementToDrag.detachEvent("onmouseup",upHandler);
elementToDrag.releaseCapture();
e.stopPropagation ? e.stopPropagation : e.cancelBubble = true;
}
}
}
</script></body>
</html>