代码改变世界

DragDrop

2009-09-21 17:50  BlueDream  阅读(387)  评论(0)    收藏  举报
Handler

代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> DragDrop </title>
  <style type="text/css">
  body {
    padding: 0px;
    margin: 0px;
    font-size: 12px;
  }

  #drager {
    width: 150px;
    height: 100px;
    background-color: #85053C;
  }

  #handler {
    width: 100%;
    height: 30px;
    background-color: #FFCC66;
    text-align: center;
  }
  </style>
  <script type="text/javascript">
    var $ = function(id) {
        return 'string' == typeof id ? document.getElementById(id) : id;
    }

    var $d = (document.compatMode == "CSS1Compat") ? document.documentElement : document.body;
    
    var isIE = navigator.userAgent.indexOf('MSIE') != -1;
    function addEvent(oTarget, sType, fnHandler){
        if(window.attachEvent){
            oTarget.attachEvent("on"+sType, fnHandler)
        }else if(window.addEventListener){
            oTarget.addEventListener(sType, fnHandler, false);
        }else{
            oTarget["on"+sType] = fnHandler;
        }
    }

    function removeEvent(oTarget, sType, fnHandler){
        if(window.detachEvent){
            oTarget.detachEvent("on"+sType, fnHandler);
        }else if(window.removeEventListener){
            oTarget.removeEventListener(sType, fnHandler, false);
        }else {
            oTarget["on"+sType] = null;
        }
    }

    var Extend = function(destination, source){
        for(var pro in source){
            destination[pro] = source[pro];
        }
        return destination;
    }

    var Bind = function(object, fun){
        var args = Array.prototype.slice.call(arguments, 2);
        return function(){
            return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
        }
    }

    var BindAsEventListener = function(object, fun){
        var args = Array.prototype.slice.call(arguments, 2);
        return function(event){
            return fun.apply(object, [event || window.event].concat(args));
        }
    }

    var Class = {
        create: function(){
            return function(){
                this.initialize.apply(this, arguments);
            }
        }
    }

    var Drag = Class.create();
    Drag.prototype = {
        initialize: function(dragId, options){
            var oThis = this;
            this.Drager = $(dragId);
            this.DisX = this.DisY = 0;
            this.SetOptions(options);
            Extend(this, this.options);    
            this.o = this.Handler || this.Drager;
            with(this.Drager.style){position = position != "absolute" && "absolute"};    
            this._fM = BindAsEventListener(this, this.MouseMove);
            this._fU = Bind(this, this.MouseUp);
            addEvent(this.o, "mousedown", BindAsEventListener(this, oThis.MouseDown));
            addEvent(this.o, "mouseover", function(){oThis.o.style.cursor = "pointer"});

        },

        SetOptions: function(options){
            this.options = {
                isLockX: false,
                isLockY: false,
                isLock: false,
                isResize: true,
                isLimit: true,
                Handler: $('handler')
            };
            Extend(this.options, options || {});
        },

        MouseDown: function(event){
            if(this.isLock) { this.MouseUp(); return;}
            this.DisX = event.clientX - this.Drager.offsetLeft;
            this.DisY = event.clientY - this.Drager.offsetTop;
            isIE && this.Drager.setCapture();
            addEvent(document,"mousemove",this._fM);
            addEvent(document,"mouseup",this._fU);
        },

        MouseMove: function(event){
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            var iLeft = event.clientX - this.DisX; var iTop = event.clientY - this.DisY;
            if(this.isLimit){
                var mxLeft = 0; var mxRight = $d.clientWidth;
                var mxTop = 0; var mxBottom = $d.clientHeight;
                iLeft = Math.max(Math.min(iLeft, mxRight - this.Drager.offsetWidth), mxLeft);
                iTop = Math.max(Math.min(iTop, mxBottom - this.Drager.offsetHeight), mxTop);
            }
            if(!this.isLockX) { this.Drager.style.left = iLeft + "px" };
            if(!this.isLockY) { this.Drager.style.top = iTop + "px" };
        },

        MouseUp: function(){
            removeEvent(document,"mousemove",this._fM);
            removeEvent(document,"mouseup",this._fU);
            isIE && this.Drager.releaseCapture();
        }
    }

  </script>
 </head>

 <body>
     <div id="drager">
        <div id="handler"> Handler </div>
     </div>
 <script type="text/javascript">
        var drag = new Drag('drager', {isLimit:true});
 </script>
 </body>
</html>