脚本语言

站长网拖拽效果完整Js

编辑:dnawo 日期:2008-02-23

字体大小: 小中大

今天在逛站长网时无意中发现站长工具页(http://tool.admin5.com/)各类工具位置支持拖拽，一时兴起研究了下脚本，下边是D下来的脚本(稍做了修改)：

HTML代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>站长网拖拽效果完整Js</title>
<style type="text/css">
#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;}
</style>
<script language="javascript">
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 < Util.dragArray.length; i++) {
        var ele = Util.dragArray[i];
        ele.elm.pagePosLeft = Util.getOffset(ele.elm, true);
        ele.elm.pagePosTop = Util.getOffset(ele.elm, false);
    }
    var nextSib = el.elm.nextSibling;
    while (nextSib) {
        nextSib.pagePosTop -= el.elm.offsetHeight;
        nextSib = nextSib.nextSibling;
    }
};

Util.hide = function () {
    Util.rootElement.style.display = "none";
};

Util.show = function () {
    Util.rootElement.style.display = "";
};

ghostElement = null;

getGhostElement = function () {
    if (!ghostElement) {
        ghostElement = document.createElement("DIV");
        ghostElement.className = "toolbox";
        ghostElement.backgroundColor = "";
        ghostElement.style.border = "2px dashed #aaa";
        ghostElement.innerHTML = " ";
    }
    return ghostElement;
};

function draggable(el) {
    this._dragStart = start_Drag;
    this._drag = when_Drag;
    this._dragEnd = end_Drag;
    this._afterDrag = after_Drag;
    this.isDragging = false;
    this.elm = el;
    this.header = document.getElementById(el.id + "_h");
    this.hasIFrame = this.elm.getElementsByTagName("IFRAME").length > 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 end_Drag() {
    if (this._afterDrag()) {
    }
    return true;
};

function $(element) {
	var elements = new Array();
	if (arguments.length > 1) {
		for (var i = 0, elements = [], length = arguments.length; i < length; i++)
		elements.push($(arguments[i]));
		return elements;
	}
	element = document.getElementById(element);
	return element;
};

function chg(elm){
	var inner=elm.parentNode.nextSibling;
	if(inner.style.display=="block"){
		inner.style.display="none";
	}else{
		inner.style.display="block";
	}
}

<body>
<div id="page">
	
	<div class="col">
		<div id="m_1" class="toolbox">
		<div class="title">
		<div class="control" onClick="chg(this);">×</div>
		<div id="m_1_h">标题一</div>
		</div><div class="inner" style="display:block">木子屋:http://www.mzwu.com/</div></div>
		
		<div id="m_2" class="toolbox">
		<div class="title">
		<div class="control" onClick="chg(this);">×</div>
		<div id="m_2_h">标题二</div>
		</div><div class="inner" style="display:block">木子屋:http://www.mzwu.com/</div></div>
		
		<div class="dm"></div>
	</div>
	
	<div class="col">
	<div id="m_3" class="toolbox">
	<div class="title">
	<div class="control" onClick="chg(this);">×</div>
	<div id="m_3_h">标题三</div>
	</div><div class="inner" style="display:block">木子屋:http://www.mzwu.com/</div></div>
	
	<div id="m_4" class="toolbox">
	<div class="title">
	<div class="control" onClick="chg(this);">×</div>
	<div id="m_4_h">标题四</div>
	</div><div class="inner" style="display:block">木子屋:http://www.mzwu.com/</div></div>
	
	<div class="dm"></div>
	</div>
</div>
<script>_Admin5_init($("page"));</script>
</body>
</html>

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

上一篇: SEO培训:沙盒炸弹来自幽灵的金三角连坐区域

下一篇: Firefox下隐藏表格行不能使用block

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags:

最新日志:

评论: 0 | 引用: 0 | 查看次数: 4287

发表评论

请登录后再发表评论！

Powered By PJBlog3 V3.2.9.518 CopyRight 2005 - 2021, 木子屋 xhtml | css
Processed in 0.576172 second(s) , 6 queries , Simple Yellow Design By ChangHua(FatMouse) 闽ICP备19016051号-1

01.w3school	02.51Windows
03.ES6入门教程	04.PHP中文手册
05.MSDN\|.NET	06.Visual Studio\|O
07.ASP.NET MVC2	08.ASP.NET MVC3
09.jQuery\|D\|P	10.Vue.js
11.AspNetPager	12.SharpZipLib
13.AjaxPro	14.Json.NET
15.Web Services	16.BaiDu API
17.数据堂	18.纯真IP库
19.SharpDevelop	20.动软
21..NET Reflector	22.百度\|高德[坐标]
23.Layui\|G\|X\|Q	24.Ele\|uni-app
25.SourceForge	26.CodeProject
27.Dynamic Drive	28.CodePlex
29.GitHub	30.Gitee
31.IItellYou	32.面包多
33.一门APP	34.友盟数据
35.JSON格式化	36.在线文本比较
37.微软开发者中心	38.Android开发者中心

站长网拖拽效果完整Js

编辑:dnawo 日期:2008-02-23

Category

IM Online

User Panel

Search

Recent Comments

最新评论

Resources