封装一个Drop and Drag面板控件，供大家分享

      一直想封装一个像Google个性主页那样的可拖动布局管理器，供管理后台作为默认首页使用。
      在网上搜了一下，找到此篇文章对google个性主页的拖拽效果的js的完整注释。在此先向原作者致敬，没有这篇文章，我是没法封装此控件的:)
      不用多说，先附上效果图：
     
      DragDrop.js(就是原作者提供的js文件，没有做太多改动)
      

  1var Util = new Object();
  2Util.getUserAgent = navigator.userAgent;
  3Util.isGecko = Util.getUserAgent.indexOf("Gecko") != -1;
  4Util.isOpera = Util.getUserAgent.indexOf("Opera") != -1;
  5Util.getOffset = function(el, isLeft) {
  6    var retValue = 0;
  7    while (el != null) {
  8        retValue += el["offset" + (isLeft ? "Left" : "Top")];
  9        el = el.offsetParent;
 10    }
 11    return retValue;
 12};
 13
 14Util.bindFunction = function(el, fucName) {
 15    return function() {
 16        return el[fucName].apply(el, arguments);
 17    };
 18};
 19
 20Util.re_calcOff = function(el) {
 21    for (var i = 0; i < Util.dragArray.length; i++) {
 22        var ele = Util.dragArray[i];
 23        ele.elm.pagePosLeft = Util.getOffset(ele.elm, true);
 24        ele.elm.pagePosTop = Util.getOffset(ele.elm, false);
 25    }
 26    var nextSib = el.elm.nextSibling;
 27    while (nextSib) {
 28        nextSib.pagePosTop -= el.elm.offsetHeight;
 29        nextSib = nextSib.nextSibling;
 30    }
 31};
 32
 33Util.hide = function() {
 34    Util.rootElement.style.display = "none";
 35};
 36Util.show = function() {
 37    Util.rootElement.style.display = "";
 38};
 39
 40ghostElement = null;
 41getGhostElement = function() {
 42    if (!ghostElement) {
 43        ghostElement = document.createElement("DIV");
 44        ghostElement.backgroundColor = "";
 45        ghostElement.style.border = "2px dashed #aaa";
 46        ghostElement.innerHTML = "&nbsp;";
 47    }
 48    return ghostElement;
 49};
 50
 51function draggable(el) {
 52    this._dragStart = start_Drag;
 53    this._drag = when_Drag;
 54    this._dragEnd = end_Drag;
 55    this._afterDrag = after_Drag;
 56    this.isDragging = false;
 57    this.elm = el;
 58    this.header = document.getElementById(el.id + "_h");
 59    this.hasIFrame = this.elm.getElementsByTagName("IFRAME").length > 0;
 60    if (this.header) {
 61        this.header.style.cursor = "move";
 62        Drag.init(this.header, this.elm);
 63        this.elm.onDragStart = Util.bindFunction(this, "_dragStart");
 64        this.elm.onDrag = Util.bindFunction(this, "_drag");
 65        this.elm.onDragEnd = Util.bindFunction(this, "_dragEnd");
 66    }
 67};
 68
 69function start_Drag() {
 70    Util.re_calcOff(this);
 71    this.origNextSibling = this.elm.nextSibling;
 72    var _ghostElement = getGhostElement();
 73    var offH = this.elm.offsetHeight;
 74    if (Util.isGecko) {
 75        offH -= parseInt(_ghostElement.style.borderTopWidth) * 2;
 76    }
 77    var offW = this.elm.offsetWidth;
 78    var offLeft = Util.getOffset(this.elm, true);
 79    var offTop = Util.getOffset(this.elm, false);
 80    Util.hide();
 81    this.elm.style.width = offW + "px";
 82    _ghostElement.style.height = offH + "px";
 83    this.elm.parentNode.insertBefore(_ghostElement, this.elm.nextSibling);
 84    this.elm.style.position = "absolute";
 85    this.elm.style.zIndex = 100;
 86    this.elm.style.left = offLeft + "px";
 87    this.elm.style.top = offTop + "px";
 88    Util.show();
 89    this.isDragging = false;
 90    return false;
 91};
 92function when_Drag(clientX, clientY) {
 93    if (!this.isDragging) {
 94        this.elm.style.filter = "alpha(opacity=70)";
 95        this.elm.style.opacity = 0.7;
 96        this.isDragging = true;
 97    }
 98    var found = null;
 99    var max_distance = 100000000;
100    for (var i = 0; i < Util.dragArray.length; i++) {
101        var ele = Util.dragArray[i];
102        var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2) + Math.pow(clientY - ele.elm.pagePosTop, 2));
103        if (ele == this) {
104            continue;
105        }
106        if (isNaN(distance)) {
107            continue;
108        }
109        if (distance < max_distance) {
110            max_distance = distance;
111            found = ele;
112        }
113    }
114    var _ghostElement = getGhostElement();
115    if (found != null && _ghostElement.nextSibling != found.elm) {
116        found.elm.parentNode.insertBefore(_ghostElement, found.elm);
117        if (Util.isOpera) {
118            document.body.style.display = "none";
119            document.body.style.display = "";
120        }
121    }
122};
123function end_Drag() {
124    if (this._afterDrag()) {
125    }
126    return true;
127};
128function after_Drag() {
129    var returnValue = false;
130    Util.hide();
131    this.elm.style.position = "";
132    this.elm.style.width = "";
133    this.elm.style.zIndex = "";
134    this.elm.style.filter = "";
135    this.elm.style.opacity = "";
136    var ele = getGhostElement();
137    if (ele.nextSibling != this.origNextSibling) {
138        ele.parentNode.insertBefore(this.elm, ele.nextSibling);
139        returnValue = true;
140    }
141    ele.parentNode.removeChild(ele);
142    Util.show();
143    if (Util.isOpera) {
144        document.body.style.display = "none";
145        document.body.style.display = "";
146    }
147    return returnValue;
148};
149var Drag = {
150    obj: null,
151    init: function(elementHeader, element) {
152        elementHeader.onmousedown = Drag.start;
153        elementHeader.obj = element;
154        if (isNaN(parseInt(element.style.left))) {
155            element.style.left = "0px";
156        }
157        if (isNaN(parseInt(element.style.top))) {
158            element.style.top = "0px";
159        }
160        element.onDragStart = new Function();
161        element.onDragEnd = new Function();
162        element.onDrag = new Function();
163    },
164    start: function(event) {
165        var element = Drag.obj = this.obj;
166        event = Drag.fixE(event);
167        if (event.which != 1) {
168            return true;
169        }
170        element.onDragStart();
171        element.lastMouseX = event.clientX;
172        element.lastMouseY = event.clientY;
173        document.onmouseup = Drag.end;
174        document.onmousemove = Drag.drag;
175        return false;
176    },
177    drag: function(event) {
178        event = Drag.fixE(event);
179        if (event.which == 0) {
180            return Drag.end();
181        }
182        var element = Drag.obj;
183        var _clientX = event.clientY;
184        var _clientY = event.clientX;
185        if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
186            return false;
187        }
188        var _lastX = parseInt(element.style.top);
189        var _lastY = parseInt(element.style.left);
190        var newX, newY;
191        newX = _lastY + _clientY - element.lastMouseX;
192        newY = _lastX + _clientX - element.lastMouseY;
193        element.style.left = newX + "px";
194        element.style.top = newY + "px";
195        element.lastMouseX = _clientY;
196        element.lastMouseY = _clientX;
197        element.onDrag(newX, newY);
198        return false;
199    },
200    end: function(event) {
201        event = Drag.fixE(event);
202        document.onmousemove = null;
203        document.onmouseup = null;
204        var _onDragEndFuc = Drag.obj.onDragEnd();
205        Drag.obj = null;
206        return _onDragEndFuc;
207    },
208    fixE: function(ig_) {
209        if (typeof ig_ == "undefined") {
210            ig_ = window.event;
211        }
212        if (typeof ig_.layerX == "undefined") {
213            ig_.layerX = ig_.offsetX;
214        }
215        if (typeof ig_.layerY == "undefined") {
216            ig_.layerY = ig_.offsetY;
217        }
218        if (typeof ig_.which == "undefined") {
219            ig_.which = ig_.button;
220        }
221        return ig_;
222    }
223};
224
225var _IG_initDrag = function(el) {
226    Util.rootElement = el;
227    Util._rows = Util.rootElement.rows[0];
228    Util.column = Util._rows.cells;
229    Util.dragArray = new Array();
230    var counter = 0;
231    for (var i = 0; i < Util.column.length; i++) {
232        var ele = Util.column[i];
233        for (var j = 0; j < ele.childNodes.length; j++) {
234            var ele1 = ele.childNodes[j];
235            if (ele1.tagName == "DIV") {
236                Util.dragArray[counter] = new draggable(ele1);
237                counter++;
238            }
239        }
240    }
241};
242
243var _IG_closePanel = function(id) {
244    document.getElementById(id).style.display = "none";
245};

      控件容器DragDrop.cs
      

  1using System;
  2using System.Collections.Generic;
  3using System.Linq;
  4using System.Text;
  5using System.IO;
  6using System.Web;
  7using System.ComponentModel;
  8using System.Web.UI;
  9using System.Web.UI.Design;
 10using System.Web.UI.WebControls;
 11
 12[assembly: WebResource("pqmagic.Common.UI.Resources.DragDrop.js", "text/javascript")]
 13namespace pqmagic.Common.UI
 14{
 15    [
 16        ToolboxData("<{0}:DragDrop runat=\"server\"></{0}:DragDrop>"),
 17        Designer(typeof(SubContainerControlDesigner)),
 18        ParseChildren(typeof(DragDropPanel)),
 19        PersistChildren(true)
 20    ]
 21    public class DragDrop : WebControl
 22    {
 23        private int repeatColumns = 3;
 24
 25        /**//// <summary>
 26        /// 重复数
 27        /// </summary>
 28        [
 29        Browsable(true),
 30        Description("设置/获取重复数"),
 31        Category("Misc"),
 32        DefaultValue("3")
 33        ]
 34        public int RepeatColumns
 35        {
 36            get
 37            {
 38                return repeatColumns;
 39            }
 40            set
 41            {
 42                repeatColumns = value;
 43            }
 44        }
 45
 46        protected override HtmlTextWriterTag TagKey
 47        {
 48            get
 49            {
 50                return HtmlTextWriterTag.Table;
 51            }
 52        }
 53
 54        protected override void OnPreRender(EventArgs e)
 55        {
 56            if (!Page.ClientScript.IsClientScriptIncludeRegistered("DragDrop"))
 57            {
 58                Page.ClientScript.RegisterClientScriptInclude("DragDrop", Page.ClientScript.GetWebResourceUrl(this.GetType(), "pqmagic.Common.UI.Resources.DragDrop.js"));
 59            }
 60            Page.ClientScript.RegisterStartupScript(this.GetType(), "InitDragDrop", "window.onload=function(){var _table = document.getElementById('"+ID+"');_IG_initDrag(_table);};",true);
 61            base.OnPreRender(e);
 62        }
 63
 64        protected override void AddAttributesToRender(HtmlTextWriter writer)
 65        {
 66            writer.AddStyleAttribute(HtmlTextWriterStyle.TextAlign, "center");
 67            base.AddAttributesToRender(writer);
 68        }
 69
 70        protected override void RenderContents(HtmlTextWriter writer)
 71        {
 72            writer.Write("<tr>");
 73            for (int i = 0; i < repeatColumns; i++)
 74            {
 75                writer.Write(string.Format("<td style=\"padding:3px;width:{0};vertical-align:top\">", new Unit(100 / repeatColumns, UnitType.Percentage)));
 76                for (int j = i;j< DragDropPanels.Count; j+=repeatColumns)
 77                {
 78                    DragDropPanels[j].RenderControl(writer);
 79                }
 80                writer.Write("</td>");
 81            }
 82            writer.Write("</tr>");
 83        }
 84
 85        protected override ControlCollection CreateControlCollection()
 86        {
 87            return new DragDropPanelCollection(this);
 88        }
 89
 90        protected override void AddParsedSubObject(object obj)
 91        {
 92            DragDropPanel panel = obj as DragDropPanel;
 93            if (panel != null)
 94            {
 95                base.Controls.Add(panel);
 96            }
 97        }
 98
 99        [PersistenceMode(PersistenceMode.InnerDefaultProperty), Browsable(false)]
100        protected DragDropPanelCollection DragDropPanels
101        {
102            get
103            {
104                return (DragDropPanelCollection)this.Controls;
105            }
106        }
107    }
108}
109

      容器内部可拖动的面板DragDropPanel.cs
      

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Web;
using System.Drawing;
using System.ComponentModel;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.WebControls;

[assembly: WebResource("pqmagic.Common.UI.Resources.close.gif", "image/gif")]
namespace pqmagic.Common.UI
{
    [
        ToolboxData("<{0}:DragDropPanel runat=\"server\"></{0}:DragDropPanel>"),
        Designer(typeof(SubContainerControlDesigner)),
        ParseChildren(false),
        PersistChildren(true)
    ]
    public class DragDropPanel : WebControl
    {
        private string title = string.Empty;
        private Unit width = new Unit(100, UnitType.Percentage);
        private Unit height = new Unit(320, UnitType.Pixel);
        private Color headerBgColor = Color.FromArgb(0xd3, 0xea, 0xef);
        private string headerOnClientClick = string.Empty;

        /// <summary>
        /// 面板标题
        /// </summary>
        [
        Browsable(true),
        Description("设置/获取面板标题"),
        Category("Misc")
        ]
        public string Title
        {
            get
            {
                return title;
            }
            set
            {
                title = value;
            }
        }

        /// <summary>
        /// 面板高度
        /// </summary>
        [
        Browsable(true),
        Description("设置/获取面板高度"),
        Category("Misc")
        ]
        public override Unit Height
        {
            get
            {
                return height;
            }
            set
            {
                height = value;
            }
        }

        public override Unit Width
        {
            get
            {
                return width;
            }
        }

        /// <summary>
        /// 标题背景颜色
        /// </summary>
        [
        Browsable(true),
        Description("设置/获取标题背景颜色"),
        Category("Misc")
        ]
        public Color HeaderBgColor
        {
            get
            {
                return headerBgColor;
            }
            set
            {
                headerBgColor = value;
            }
        }

        /// <summary>
        /// 点击标题客户端脚本
        /// </summary>
        [
        Browsable(true),
        Description("设置/获取点击标题客户端脚本"),
        Category("Misc")
        ]
        public string HeaderOnClientClick
        {
            get
            {
                return headerOnClientClick;
            }
            set
            {
                headerOnClientClick = value;
            }
        }

        protected override HtmlTextWriterTag TagKey
        {
            get
            {
                return HtmlTextWriterTag.Div;
            }
        }

        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            writer.AddStyleAttribute(HtmlTextWriterStyle.MarginTop, "3px");
            writer.AddStyleAttribute(HtmlTextWriterStyle.Height, Height.ToString());
            writer.AddStyleAttribute(HtmlTextWriterStyle.BorderWidth, "1px");
            writer.AddStyleAttribute(HtmlTextWriterStyle.BorderColor, "#ccc");
            writer.AddStyleAttribute(HtmlTextWriterStyle.BorderStyle, "solid");
            writer.AddStyleAttribute(HtmlTextWriterStyle.Width, width.ToString());
            writer.AddStyleAttribute(HtmlTextWriterStyle.BackgroundColor, "white");
            base.AddAttributesToRender(writer);
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.Write(string.Format("<div id=\"{0}_h\" style=\"height:20px;border-right: #eaf0f6 1px solid; padding-right: 2px; padding-left: 2px;padding-bottom: 2px; margin: 0px; cursor: pointer; padding-top: 2px; border-bottom: #ccc 1px solid;background-color: {1}\">", ID, ColorTranslator.ToHtml(headerBgColor)));
            writer.Write("<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%;height:20px\">");
            writer.Write(string.Format("<tr><td style=\"text-align:left;font-weight:bold;padding-left:3px;padding-top:3px\">{0}</td><td style=\"text-align:right;padding-right:3px\"><img src=\"{1}\" onclick=\"_IG_closePanel('{2}');\" alt=\"关闭\" style=\"cursor:pointer\"/></td></tr>", headerOnClientClick == string.Empty ? Title : "<a href=\"#\" onclick=\"" + headerOnClientClick + "\" style=\"text-decoration:underline\">" + Title + "</a>", Page.ClientScript.GetWebResourceUrl(this.GetType(), "pqmagic.Common.UI.Resources.close.gif"), ID));
            writer.Write("</table>");
            writer.Write("</div>");
            writer.Write("<div style=\"overflow:scroll\">");
            base.RenderContents(writer);
            writer.Write("</div>");
        }
    }
}

      面板集合DragDropPanelCollection.cs

using System;
using System.Reflection;
using System.Security.Permissions;
using System.Web;
using System.Drawing.Design;
using System.Web.UI;

namespace pqmagic.Common.UI
{
    [AspNetHostingPermission(SecurityAction.LinkDemand, Level = AspNetHostingPermissionLevel.Minimal), AspNetHostingPermission(SecurityAction.InheritanceDemand, Level = AspNetHostingPermissionLevel.Minimal)]
    public class DragDropPanelCollection : ControlCollection
    {
        public DragDropPanelCollection(Control owner):base(owner)
        {
        }

        public override void Add(Control child)
        {
            if (!(child is DragDropPanel))
            {
                throw new ArgumentException("该集合只能添加DragDropPanel类型的控件");
            }
            base.Add(child);
        }

        public override void AddAt(int index, Control child)
        {
            if (!(child is DragDropPanel))
            {
                throw new ArgumentException("该集合只能添加DragDropPanel类型的控件");
            }
            base.AddAt(index, child);
        }

        public new DragDropPanel this[int index]
        {
            get
            {
                return (DragDropPanel)base[index];
            }
        }
    }
}