Div拖动效果

<script language="javascript" type="text/javascript">
   
        //获取控件对象
        function $(Id) {
            return document.getElementById(Id)
        };
        //为控件添加事件
        function addListener(element, e, fn) {
            element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn)
        };
        //为控件移去事件
        function removeListener(element, e, fn) {
            element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
        };
        //创建对象
        function create(elm, parent, fn) {
            var element = document.createElement(elm);
            if (fn) fn(element);
            parent.appendChild(element);
        };

        var Bind = function(object, fun) {
            return function() {
                return fun.apply(object, arguments);
            }
        }

        var BindAsEventListener = function(object, fun) {
            return function(event) {
                return fun.call(object, (event || window.event));
            }
        }

        var extend = function() {
            var args = arguments;
            if (!args[1]) args = [this, args[0]];
            for (var property in args[1]) args[0][property] = args[1][property];
            return args[0];
        };

        var Class = function(properties) {
            var _class = function() {
                return (arguments[0] !== null && this.initialize && typeof (this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
            };
            _class.prototype = properties;
            return _class;
        };

        var Drag = new Class({
            author: 'WAYNE',
            initialize: function(elm) {
                //this.lock    = false;
                this.lockX = false;
                this.lockY = false;
                this.isdocument = false;    //
                this.mxleft = 0;
                this.mxright = 0;
                this.mxtop = 0;
                this.mxbotoom = 0;
                this.limit = false;
                this._x = 0;
                this._y = 0;
                this._left = 0;
                this._top = 0;
                this.dmove = BindAsEventListener(this, this.dragmove);
                this.dstop = Bind(this, this.dragstop);
                var self = this;
                this.element = elm;
                addListener(this.element, 'mousedown', BindAsEventListener(this, this.dragdown))
            },
            dragdown: function(e) {
                if (this.isdocument) {
                    this.limit = true;
                    this.mxright = Math.max(document.body.scrollWidth, document.body.clientWidth);      //右边界
                    this.mxbotoom = Math.max(document.body.scrollHeight, document.body.clientHeight);   //底边界
                }
                var self = this;
                //clientX       事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
                //offsetLeft    返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。
                this._x = e.clientX - parseInt(this.element.offsetLeft) || 0;
                this._y = e.clientY - parseInt(this.element.offsetTop) || 0;
                this._left = parseInt(this.element.style.marginLeft) || 0;
                this._top = parseInt(this.element.style.marginTop) || 0;
                //
                if (document.all) {
                    addListener(this.element, "losecapture", this.dstop);
                    this.element.setCapture();
                }
                else {
                    e.preventDefault();
                    addListener(window, "blur", this.dstop);
                }
                addListener(document, "mousemove", this.dmove);
                addListener(document, "mouseup", this.dstop);
            },
            dragmove: function(e) {
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
               
                var iLeft = e.clientX - this._x;
                var iTop = e.clientY - this._y;
               
                var mxright = this.mxright - this.element.offsetWidth;
                var mxbotoom = this.mxbotoom - this.element.offsetHeight;
                if (this.limit) {
                    if (iLeft < this.mxleft) iLeft = this.mxleft;
                    if (iLeft > mxright) iLeft = mxright;
                    if (iTop > mxbotoom) iTop = mxbotoom;
                    if (iTop < this.mxtop) iTop = this.mxtop;
                }
                if (!this.lockX) this.element.style.left = iLeft - this._left + "px";
                if (!this.lockY) this.element.style.top = iTop - this._top + "px";
            },
            dragstop: function() {
                removeListener(document, "mousemove", this.dmove)
                removeListener(document, "mouseup", this.dstop)
                if (document.all) {
                    removeListener(this.element, "losecapture", this.dstop);
                    this.element.releaseCapture();
                }
                else
                { removeListener(window, "blur", this.dstop); };
            }
        })
       
        Drag.Getdarg = function(elm, arg) {
            return extend(new Drag(elm), arg || {})
        }
       
        var ss_drag = Drag.Getdarg($('ss'), { mxleft: 100, mxright: 500, mxtop: 100, mxbotoom: 500, limit: true });
        var sss_drag = Drag.Getdarg($('sss'));
        var ssss_drag = Drag.Getdarg($('ssss'), { isdocument: true });