Posted on 2008-08-14 14:11
G_G 閱讀(1523)
評論(1) 編輯 收藏 所屬分類:
javascript
demo 下載： http://www.tkk7.com/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;
????}
}