木子屋
 

标题: 站长网拖拽效果完整Js

作者: dnawo

日期: 2008-02-23 05:45 PM

分类: 脚本语言

内容: 今天在逛站长网时无意中发现站长工具页(http://tool.admin5.com/)各类工具位置支持拖拽，一时兴起研究了下脚本，下边是D下来的脚本(稍做了修改)：
HTML代码
站长网拖拽效果完整Js
#page{width:970px; font-size:14px;}
#page .col{ width:475px; margin-right:10px; float:left;}
#page .toolbox{ border:1px solid #C5D7EF; border-top-color:#7AA5D6; margin-bottom:10px;}
#page .title{line-height:22px; font-size:14px; padding:0 5px; background:#E5ECF9; border-bottom:1px solid #C5D7EF; color:#36c; font-weight:bold;}
.control{float:right; margin-top:4px;cursor:hand; font-weight:bold;}
.inner {height:36px; margin:4px;}
.dm{height:1px; visibility:hidden;}
var Util = new Object();
Util.getUserAgent = navigator.userAgent;
Util.isGecko = Util.getUserAgent.indexOf("Gecko") != -1;
Util.isOpera = Util.getUserAgent.indexOf("Opera") != -1;
Util.getOffset = function (el, isLeft) {
var retValue = 0;
while (el != null) {
retValue += el["offset" + (isLeft ? "Left" : "Top")];
el = el.offsetParent;
}
return retValue;
};
Util.bindFunction = function (el, fucName) {
return function () {
return el[fucName].apply(el, arguments);
};
};
Util.re_calcOff = function (el) {
for (var i = 0; i 0;
if (this.header) {
this.header.style.cursor = "move";
Drag.init(this.header, this.elm);
this.elm.onDragStart = Util.bindFunction(this, "_dragStart");
this.elm.onDrag = Util.bindFunction(this, "_drag");
this.elm.onDragEnd = Util.bindFunction(this, "_dragEnd");
}
};
function start_Drag() {
Util.re_calcOff(this);
this.origNextSibling = this.elm.nextSibling;
var _ghostElement = getGhostElement();
var offH = this.elm.offsetHeight;
if (Util.isGecko) {
offH -= parseInt(_ghostElement.style.borderTopWidth) * 2;
}
var offW = this.elm.offsetWidth-4;
var offLeft = Util.getOffset(this.elm, true);
var offTop = Util.getOffset(this.elm, false);
Util.hide();
this.elm.style.width = offW+2 + "px";
_ghostElement.style.height = offH-4 + "px";
this.elm.parentNode.insertBefore(_ghostElement, this.elm.nextSibling);
this.elm.style.position = "absolute";
this.elm.style.zIndex = 100;
this.elm.style.left = offLeft + "px";
this.elm.style.top = offTop + "px";
Util.show();
this.isDragging = false;
return false;
};
function when_Drag(clientX, clientY) {
if (!this.isDragging) {
this.elm.style.filter = "alpha(opacity=70)";
this.elm.style.opacity = 0.7;
this.isDragging = true;
}
var found = null;
var max_distance = 100000000;
for (var i = 0; i 1) {
for (var i = 0, elements = [], length = arguments.length; i




×
标题一
木子屋:http://www.mzwu.com/



×
标题二
木子屋:http://www.mzwu.com/







×
标题三
木子屋:http://www.mzwu.com/



×
标题四
木子屋:http://www.mzwu.com/



_Admin5_init($("page"));

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

+ 查看当前日志评论 (0)

 

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms

标题: 站长网拖拽效果完整Js

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.049 ms