弹出一个Div层,鼠标按住任何一个地方可以实现拖动(可以设置一个标题,按住标题拖动层,如浏览器窗口一样)
<span style="font-family:Comic Sans MS;font-size:14px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
/*
//this的说明,谁调用this,那么this指向那个对象
var drag = {
elementObj: null,
init:function(obj){
obj.onmousedown = this.startEvent;//drag 调用的init方法,this在此指向 drag
},
startEvent: function (e) {
var element;
e = drag.fireEvent(e);
e.preventDefault() && e.preventDefault;
drag.elementObj = element = this;//obj对象调用的mousedown方法,this在此指向obj对象
element.x = e.clientX - drag.elementObj.offsetLeft;
element.y = e.clientY - drag.elementObj.offsetTop;
drag.elementObj.onmousemove = drag.moveEvent;//也可以写为document.onmousemove = drag.move
drag.elementObj.onmouseup = drag.endEvent;//可以写为document.onmouseup = drag.end
},
moveEvent: function (e) {
e = drag.fireEvent(e);
var left, top;
left = e.clientX - drag.elementObj.x;
top = e.clientY - drag.elementObj.y;
drag.elementObj.style.left = left + "px";
drag.elementObj.style.top = top + "px";
},
endEvent: function (e) {
e = drag.fireEvent(e);
drag.elementObj = drag.elementObj.onmousemove = drag.elementObj.onmouseup = null;
},
fireEvent: function (e) {
if (!e) {
e = window.event;
e.target = e.srcElement;
e.layerX = e.offsetX;
e.layerY = e.offsetY;
}
return e;
}
}
window.onload = function () {
var obj = document.getElementById("float_window");
drag.init(obj);
}
*/
//方法二
function init(obj) {
var moving = false;
var left_len = 0;
var top_len = 0;
obj.onmousedown = function (e) {
moving = true;
left_len = e.clientX - this.offsetLeft;
top_len = e.clientY - this.offsetTop;//this指向obj
};
obj.onmousemove = function (e) {
if (moving) {
this.style.left = e.clientX - left_len + "px";
this.style.top = e.clientY - top_len + "px";
}
};
obj.onmouseup = function (e) {
moving = false;
}
}
window.onload = function () {
var obj = document.getElementById("float_window");
window.init(obj);
};
</script>
</head>
<body>
<div id="float_window" style="width:300px;height:300px;position:absolute;background-color:green;">
<div id="fw_header" style="width:100%;height:30px;cursor:move;background-color:#55AAAA"></div>
<div id="fw_content"></div>
</div>
</body>
</html></span>