请教一段代码，具体功能要求这样

用JAVASCRIPT 如何在页面上实现
 一个层 你用鼠标左键点击按下后 可以拖着它来回走动，不拖动了就静止不动
   效果就像我们平常拖浏览器一样  碍事的时候拖到一边。用的时候在拖到视线内

解决方案 »

  1.   


    <!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>