javascript的拖放

来源：互联网发布：HaiQisoft软件管理系统编辑：程序博客网时间：2024/06/01 21:28
资料地址：
http://www.cnblogs.com/rubylouvre/archive/2009/09/09/1563342.html
http://www.cnblogs.com/rubylouvre/archive/2009/09/11/1563955.html

 

<!doctype html>
<html dir="ltr" lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <style type="text/css">
      .drag {width:100px;height:100px;z-index:200;}
      #drag1 {background:red}
      #drag2 {background:#E8D098;}
      #drag3 {background:#fff;}
      #drag4 {background:#E8FFE8;margin-right:2px;margin-left:10px;}
      #drag5 {background:#ff0;}
      #drag6 {background:#66c;}
      #drag7 {background:#FBFBEA;}
      #drag8 {background:#E8E8FF;}
      #drag9 {background:#00B271;}
      #drag10 {background:#DDF3FF;}
      .handle {width:80px;height:20px;background:aqua;}
      #parent {width:300px;height:300px;background:blue;}
    </style>
    
    <script type="text/javascript">
      //辅助函数1
      var getCoords = function(el){
        var box = el.getBoundingClientRect(),
        doc = el.ownerDocument,
        body = doc.body,
        html = doc.documentElement,
        clientTop = html.clientTop || body.clientTop || 0,
        clientLeft = html.clientLeft || body.clientLeft || 0,
        top  = box.top  + (self.pageYOffset || html.scrollTop  ||  body.scrollTop ) - clientTop,
        left = box.left + (self.pageXOffset || html.scrollLeft ||  body.scrollLeft) - clientLeft
        return { 'top': top, 'left': left };
      };
      //辅助函数2
      var getStyle = function(el, style){
        if(!+"\v1"){
          style = style.replace(/\-(\w)/g, function(all, letter){
            return letter.toUpperCase();
          });
          var value = el.currentStyle[style];
          (value == "auto")&&(value = "0px" );
          return value;
        }else{
          return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
        }
      }
      //============================
      var Drag = function(id){
        var el = document.getElementById(id),
        isQuirk = document.documentMode ? document.documentMode == 5 : document.compatMode && document.compatMode != "CSS1Compat",
        options  = arguments[1] || {},
        container = options.container || document.documentElement,
        limit = options.limit,
        lockX = options.lockX,
        lockY = options.lockY,
        ghosting = options.ghosting,
        handle = options.handle,
        revert = options.revert,
        scroll = options.scroll,
        coords =  options.coords,
        onStart =  options.onStart || function(){},
        onDrag =  options.onDrag || function(){},
        onEnd =  options.onEnd || function(){} ,
        marginLeft = parseFloat(getStyle(el,"margin-left")),
        marginRight = parseFloat(getStyle(el,"margin-right")),
        marginTop =  parseFloat(getStyle(el,"margin-top")),
        marginBottom = parseFloat(getStyle(el,"margin-bottom")),
        cls,
        _handle,
        _ghost,
        _top,
        _left,
        _html;
        el.lockX = getCoords(el).left;
        el.lockY = getCoords(el).top;
        el.style.position = "absolute";
        if(handle){
          cls = new RegExp("(^|\\s)" + handle + "(\\s|$)");
          for(var i=0,l=el.childNodes.length;i<l;i++){
            var child = el.childNodes[i];
            if(child.nodeType == 1 && cls.test(child.className)){
              _handle = child;
              break;
            }
          }
        }
        _html = (_handle || el).innerHTML;
        var dragstart = function(e){
          e = e || window.event;
          el.offset_x = e.clientX - el.offsetLeft;
          el.offset_y = e.clientY - el.offsetTop;
          document.onmouseup = dragend;
          document.onmousemove = drag;
          if(ghosting){
            _ghost = el.cloneNode(false);
            el.parentNode.insertBefore(_ghost,el.nextSibling);
            if(_handle){
              _handle = _handle.cloneNode(false);
              _ghost.appendChild(_handle);
            }
              !+"\v1"? _ghost.style.filter = "alpha(opacity=50)" : _ghost.style.opacity = 0.5;
          }
          (_ghost || el).style.zIndex = ++Drag.z;
          onStart();
          return false;
        }
        var drag = function(e) {
          e = e || window.event;
          el.style.cursor = "pointer";
            !+"\v1"? document.selection.empty() : window.getSelection().removeAllRanges();
          _left = e.clientX - el.offset_x ;
          _top = e.clientY - el.offset_y;
          if(scroll){
            var doc = isQuirk ? document.body : document.documentElement;
            doc = options.container || doc;
            options.container && (options.container.style.overflow = "auto");
            var a = getCoords(el).left + el.offsetWidth;
            var b = doc.clientWidth;
            if (a > b){
              doc.scrollLeft = a - b;
            }
            var c = getCoords(el).top + el.offsetHeight;
            var d = doc.clientHeight;
            if (c > d){
              doc.scrollTop = c - d;
            }
          }
          if(limit){
            var _right = _left + el.offsetWidth ,
            _bottom = _top + el.offsetHeight,
            _cCoords = getCoords(container),
            _cLeft = _cCoords.left,
            _cTop = _cCoords.top,
            _cRight = _cLeft + container.clientWidth,
            _cBottom = _cTop + container.clientHeight;
            _left = Math.max(_left, _cLeft);
            _top = Math.max(_top, _cTop);
            if(_right > _cRight){
              _left = _cRight - el.offsetWidth - marginLeft - marginRight;
            }
            if(_bottom > _cBottom){
              _top = _cBottom - el.offsetHeight  - marginTop - marginBottom;
            }
          }
          lockX && ( _left = el.lockX);
          lockY && ( _top = el.lockY);
          (_ghost || el).style.left = _left + "px";
          (_ghost || el).style.top = _top  + "px";
          coords && ((_handle || _ghost || el).innerHTML = _left + " x " + _top);
          onDrag();
        }

        var dragend = function(){
          document.onmouseup = null;
          document.onmousemove = null;
          _ghost && el.parentNode.removeChild(_ghost);
          el.style.left = _left + "px";
          el.style.top = _top +"px";
          (_handle || el).innerHTML = _html;
          if(revert){
            el.style.left = el.lockX   + "px";
            el.style.top = el.lockY  + "px";
          }
          onEnd();
        }
        Drag.z = 999;
        (_handle || el).onmousedown = dragstart;
      }
      window.onload = function(){
        var cache  = [];
        var _  = function(id){
          return cache[id] || (cache[id] = document.getElementById(id))
        }
        var p = _("parent");
        new Drag("drag1",{coords:true,revert:true});
        new Drag("drag2",{coords:true,container:p,limit:true,lockX:true});
        new Drag("drag3",{coords:true,coords:true,container:p,limit:true,lockY:true});
        new Drag("drag4",{coords:true,container:p,limit:true,handle:"handle"});
        new Drag("drag5",{coords:true,scroll:true});
        new Drag("drag6",{coords:true,ghosting:true,limit:true,handle:"handle"})
        new Drag("drag7",{coords:false,handle:"handle"});
        new Drag("drag8",{coords:true,onStart:function(){_("drag8").innerHTML= "拖动开始"}});
        new Drag("drag9",{onStart:function(){_("drag9").innerHTML= "拖动中"}});
        new Drag("drag10",{coords:false,ghosting:true,onEnd:function(){_("drag10").innerHTML= "拖动结束"}});
      }

    </script>
    <title>拖动</title>
  </head>
  <body id="body">
    <p>拖动时可能被选中的文本……………………</p>
    <div id="parent">
      <div id="drag1" class="drag">drag1测试revert参数</div>
      <div id="drag2" class="drag">drag2测试锁定X轴</div>
      <div id="drag3" class="drag">drag3测试锁定Y轴</div>
      <div id="drag4" class="drag"><div class="handle" >handle</div>drag4测试修正margin</div>
      <div id="drag5" class="drag">drag5测试scroll参数</div>
      <div id="drag6" class="drag">
        <div class="handle" >drag6</div>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_tear.gif" />
        <div>测试影子拖动</div>
      </div>
      <div id="drag7" class="drag"><div class="handle" >handle</div>drag7测试关闭显示坐标</div>
      <div id="drag8" class="drag">drag8测试onStart</div>
      <div id="drag9" class="drag">drag9测试onDrag</div>
      <div id="drag10" class="drag"><div class="handle" >handle</div>drag10测试onEnd</div>
    </div>
  </body>
</html>