Posted on 2008-08-14 14:11
G_G 阅读(1517)
评论(1) 编辑 收藏 所属分类:
javascript
demo 下载： http://www.blogjava.net/Files/Good-Game/div_.rar
运行 div.html
html:
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="drag.js"></script>
<META http-equiv=Content-Type content="text/html; charset=utf8">
</head>
<body>
<a
onclick="getDrag(event,
'ajax.html?id=5',
'position:absolute;display:none;left:50; top:10; z-index:1000; padding:0px; background-color:#FFFFCC; color:#201000; font-size:12px; border:5px solid #284860;',
'background-color:#CCFFCC;')">测试使用（请点击）
</a>
</body>
</html>
js.
// 参考 ： http://hi.baidu.com/foxlively/blog/item/0ce341b3f0c050a2d8335af8.html
// 使用 ： prototype.js
//使用方法
var _div1 = null;
var _style2 = null;
function getDrag(event, url,divId, style1, style2) {
if (style2)
_style2 = style2;
else
_style2 = "";
if(divId==null)
_div1 = document.createElement("div");
else
_div1 = document.getElementById(divId);
_div1.style.position = 'absolute';
_div1.style.display = 'none';
if (_div1.style.border == null || _div1.style.border == '')
_div1.style.border = '1px solid #284860';
if (style1)
_div1.setAttribute('style', style1);
actionAjax(url);
document.body.appendChild(_div1);
showByEvent(event, _div1);
}
function getActionName(url) {
var question = url.indexOf("?");
if (question > 0) {
return url.substring(0, question);
}
else {
return url;
}
}
function getActionPars(url) {
var question = url.indexOf("?");
if (question > 0) {
return url.substring(question+1, url.length);
}
else {
var d = new Date();
var t = d.getTime();
return "timestamp="+t;
}
}
function actionAjax(url) {
var urls = getActionName(url);
var pars = getActionPars(url);
var myAjax = new Ajax.Updater(_div1, urls, {
method :'post',
parameters :pars,
onComplete :_action
});
}
function _action(req) {
var varhtml = "<div id=\"_drag_div\" style=\""
+ _style2
+ "\" align=\"right\"><br/><a href=\"javascript:;\" onclick=\"this.parentNode.parentNode.style.display='none';this.parentNode.parentNode.innerHTML=null;\">[关闭]</a></div>"
+ req.responseText
+"<div id=\"_drag_div\" style=\""
+ _style2
+ "\" align=\"left\"><br/><a href=\"javascript:;\" onclick=\"this.parentNode.parentNode.style.display='none';this.parentNode.parentNode.innerHTML=null;\">[关闭]</a></div>"
;
//varhtml = varhtml.replace(/form[ ]+action=["'](.*)["']/gi, "form action=\"javascript:actionAjax('$1');\" ") ;
_div1.innerHTML = varhtml;
var drag = new Drag();
// drag.build(div1);//拖动本身
drag.build(_div1, _div1.firstChild);// 通过一个对象拖动另一个对象
//drag.build(_div1, _div1.lastChild);// 通过一个对象拖动另一个对象
}
function showByEvent(event, useDiv) {
useDiv.style.display = "";
useDiv.style.left = mouseX(event);
useDiv.style.top = mouseY(event);
}
function mouseX(ev) {
if( ev == null )ev = event || window.event ;
if(ev.clientX){
return ev.clientX + document.body.scrollLeft - document.body.clientLeft;
}else if(ev.pageX){
return ev.pageX;
}
}
function mouseY(ev) {
if( ev == null )ev = event || window.event ;
if(ev.clientY){
return ev.clientY + document.body.scrollTop - document.body.clientTop ;
}else if(ev.pageX){
return ev.pageY;
}
}
function Drag() {
}
Drag.prototype.baseX = 0;
Drag.prototype.baseY = 0;
Drag.prototype.lastX = 0;
Drag.prototype.lastY = 0;
Drag.prototype.nowX = 0;
Drag.prototype.nowY = 0;
Drag.prototype.obD = null;
Drag.prototype.obM = null;
Drag.prototype.build = function(_obD, _obM) {
if (_obM) {
Drag.prototype.obM = _obM;
} else {
Drag.prototype.obM = _obD;
}
Drag.prototype.obD = _obD;
Drag.prototype.obM.onmousedown = function(event) {
Drag.prototype.lastX = mouseX(event);
Drag.prototype.lastY = mouseY(event);
Drag.prototype.baseX = Drag.prototype.obD.style.left;
Drag.prototype.baseY = Drag.prototype.obD.style.top;
this.onmousemove = function(event) {
Drag.prototype.nowX = mouseX(event);
Drag.prototype.nowY = mouseY(event);
Drag.prototype.obD.style.left = (parseFloat(Drag.prototype.baseX)
+ Drag.prototype.nowX - Drag.prototype.lastX)
+ "px";
Drag.prototype.obD.style.top = (parseFloat(Drag.prototype.baseY)
+ Drag.prototype.nowY - Drag.prototype.lastY)
+ "px";
}
}
Drag.prototype.obM.onmouseup = function(event) {
// obD.onmouseup = null;
Drag.prototype.obD.onmousemove = null;
Drag.prototype.obM.onmousemove = null;
}
Drag.prototype.obM.onmouseout = function() {
// obM.onmouseup = null
Drag.prototype.obM.onmousemove = null;
Drag.prototype.obD.onmousemove = null;
}
}