求助！！！我做的可以拖动的div,但是拖动之后速度很慢

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Drag & Drop</title>
<style type="text/css">
body{ background-color:#36393D; font-size:12px; margin:0px; }
DIV.dragLayer{
border:1px solid #369;
background-color:#6BBA70;
margin-bottom:10px;
}
DIV.dragLayer_over{
border:1px solid #C79810;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}
DIV.clone_dragLayer_over{
border:1px dashed #FA0;
background-color:#6BBA70;
filter:alpha(opacity=80);
-moz-opacity:0.8; /* Moz + FF */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
margin-bottom:10px;
}
DIV.dragHeader{
width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF;
}
DIV.dragHeader_over{
width:100%; height:20px ; line-height:20px; background-color:#C79810;
}
SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}
#container{margin:0px}
#leftcontainer{float:left;  width:33%;}
#middlecontainer{float:left; width:34%;}
#middlecontainer div{margin-left:auto; margin-right:auto}
#rightcontainer{float:right; width:33%;}
#rightcontainer div{float:right}
DIV.content{width:100%; padding:4px}
</style>
<script type="text/javascript">
var CoolDrag={
obj : null, //目标对象
cloneobj : null, //拖动对象
container : null, //容器
dragged : false, //拖动标志
shadow: null, //阴影init:function(id){
  CoolDrag.container = $(id);
  var cooldrag = CoolDrag.read("cooldrag");
  if(cooldrag != ""){//读取cookie
   var subcontainer = cooldrag.split("|");
   for(var i=0 ; i < subcontainer.length; i++){
    var subcontainerItem = subcontainer[i].split(":");
    if($(subcontainerItem[0])){
     var items = subcontainerItem[1].split(",");
     for(var j=0; j< items.length; j++){
      if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j]));
     }
    }
   }
  }
  cleanWhitespace(CoolDrag.container)//清除空白节点
  var collection = CoolDrag.container.getElementsByTagName("DIV");
  for(var i = 0; i < collection.length; i++){
   if(collection[i].className == "dragLayer"){
    var o = collection[i].firstChild;   
    SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]);
    o.onmousedown = CoolDrag.start;
   }
  }
  document.onmousemove = CoolDrag.drag;
  document.onmouseup = CoolDrag.end;
},

解决方案 »

  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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Drag & Drop</title>
    <style type="text/css">
    body{ background-color:#36393D; font-size:12px; margin:0px; }
    DIV.dragLayer{
    border:1px solid #369;
    background-color:#6BBA70;
    margin-bottom:10px;
    }
    DIV.dragLayer_over{
    border:1px solid #C79810;
    background-color:#6BBA70;
    filter:alpha(opacity=80);
    -moz-opacity:0.8; /* Moz + FF */
    opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
    }
    DIV.clone_dragLayer_over{
    border:1px dashed #FA0;
    background-color:#6BBA70;
    filter:alpha(opacity=80);
    -moz-opacity:0.8; /* Moz + FF */
    opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
    margin-bottom:10px;
    }
    DIV.dragHeader{
    width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF;
    }
    DIV.dragHeader_over{
    width:100%; height:20px ; line-height:20px; background-color:#C79810;
    }
    SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings}
    #container{margin:0px}
    #leftcontainer{float:left;  width:33%;}
    #middlecontainer{float:left; width:34%;}
    #middlecontainer div{margin-left:auto; margin-right:auto}
    #rightcontainer{float:right; width:33%;}
    #rightcontainer div{float:right}
    DIV.content{width:100%; padding:4px}
    </style>
    <script type="text/javascript">
    var CoolDrag={
    obj : null, //目标对象
    cloneobj : null, //拖动对象
    container : null, //容器
    dragged : false, //拖动标志
    shadow: null, //阴影init:function(id){
      CoolDrag.container = $(id);
      var cooldrag = CoolDrag.read("cooldrag");
      if(cooldrag != ""){//读取cookie
       var subcontainer = cooldrag.split("|");
       for(var i=0 ; i < subcontainer.length; i++){
        var subcontainerItem = subcontainer[i].split(":");
        if($(subcontainerItem[0])){
         var items = subcontainerItem[1].split(",");
         for(var j=0; j< items.length; j++){
          if($(items[j])) $(subcontainerItem[0]).appendChild($(items[j]));
         }
        }
       }
      }
      cleanWhitespace(CoolDrag.container)//清除空白节点
      var collection = CoolDrag.container.getElementsByTagName("DIV");
      for(var i = 0; i < collection.length; i++){
       if(collection[i].className == "dragLayer"){
        var o = collection[i].firstChild;   
        SavedObject.push([o.parentNode.id,1,o.parentNode.style.height]);
        o.onmousedown = CoolDrag.start;
       }
      }
      document.onmousemove = CoolDrag.drag;
      document.onmouseup = CoolDrag.end;
    },
      

  2.   

    3楼重复了start:function(e){
      if(!e) e = window.event;
      var obj = getT(e);
      if(obj.className == "min"){
       CoolDrag.min(e);
       return;
      }else if(obj.className == "close"){
       CoolDrag.close(e);
       return;
      }else{
       if(obj.className != "dragHeader") obj = obj.parentNode;
      }
      CoolDrag.dragged = true;
      CoolDrag.obj = obj.parentNode;
      CoolDrag.cloneobj = CoolDrag.obj.cloneNode(true);
      document.body.appendChild(CoolDrag.cloneobj);
      CoolDrag.shadow = document.createElement("DIV");
      document.body.appendChild(CoolDrag.shadow);
      with(CoolDrag.cloneobj.style){
       position = "absolute";
       zIndex = 1000;
       left = getRealLeft(CoolDrag.obj) + "px";
       top = getRealTop(CoolDrag.obj) + "px";
      }
      with(CoolDrag.shadow.style){
       position = "absolute";
       zIndex = 999;
       left = getRealLeft(CoolDrag.obj) + 4 + "px";
       top = getRealTop(CoolDrag.obj) + 4 + "px";
       width = CoolDrag.obj.offsetWidth + "px";
       height = CoolDrag.obj.offsetHeight + "px";
       backgroundColor = "#ccc";
       if(navigator.userAgent.indexOf("Gecko") != -1)
        MozOpacity = "0.5";
       else if(navigator.userAgent.indexOf("MSIE") != -1)
        filter = "alpha(opacity=50)";
      }
      
      CoolDrag.cloneobj.initMouseX = getMouseX(e);
      CoolDrag.cloneobj.initMouseY = getMouseY(e);
      CoolDrag.cloneobj.initoffsetL = getRealLeft(CoolDrag.obj);
      CoolDrag.cloneobj.initoffsetY = getRealTop(CoolDrag.obj);
      //change style
      CoolDrag.cloneobj.firstChild.className="dragHeader_over";
      CoolDrag.cloneobj.className = "dragLayer_over";
      CoolDrag.obj.className="clone_dragLayer_over";
    },drag:function(e){
      if(!CoolDrag.dragged||CoolDrag.obj==null)return;
      if(!e) e = window.event;
      var currenX = getMouseX(e);
      var currenY = getMouseY(e);
      
      if(CoolDrag.cloneobj.initoffsetL +  currenX - CoolDrag.cloneobj.initMouseX > getRealLeft(CoolDrag.container))
       CoolDrag.cloneobj.style.left = (CoolDrag.cloneobj.initoffsetL +  currenX - CoolDrag.cloneobj.initMouseX) + "px";
      else
       CoolDrag.cloneobj.style.left = getRealLeft(CoolDrag.container) + "px";
      if(CoolDrag.cloneobj.initoffsetY +  currenY - CoolDrag.cloneobj.initMouseY > getRealTop(CoolDrag.container))
       CoolDrag.cloneobj.style.top = (CoolDrag.cloneobj.initoffsetY +  currenY - CoolDrag.cloneobj.initMouseY) + "px";
      else
       CoolDrag.cloneobj.style.top = getRealTop(CoolDrag.container) + "px";
      var collection = CoolDrag.container.getElementsByTagName("DIV");
      var finded = false;
      for(var i = 0; i < collection.length; i++){
       var o = collection[i];
       if(o.className == "dragLayer"){
        if(((getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft &&  getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft) ||    
        (getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth &&
        getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft + CoolDrag.cloneobj.offsetWidth)) &&
           getRealTop(o) <= CoolDrag.cloneobj.offsetTop && getRealTop(o) + o.offsetHeight >= CoolDrag.cloneobj.offsetTop)
        {
         //window.status = getRealTop(o.parentNode)+"|"+(CoolDrag.cloneobj.offsetTop - 8);
         if(getRealTop(o.parentNode) >= CoolDrag.cloneobj.offsetTop - 8){
          o.parentNode.insertBefore(CoolDrag.obj,o);
         }else{
          if(o.nextSibling)
           o.parentNode.insertBefore(CoolDrag.obj,o.nextSibling);
          else
           o.parentNode.appendChild(CoolDrag.obj);
         } 
         finded = true;
         break;
        } 
       }
      }
      if(!finded){
       for(var i = 0; i < CoolDrag.container.childNodes.length; i++){
        var o = CoolDrag.container.childNodes[i];
        if(getRealLeft(o) <= CoolDrag.cloneobj.offsetLeft &&  getRealLeft(o) + o.offsetWidth >= CoolDrag.cloneobj.offsetLeft)
         o.appendChild(CoolDrag.obj);
       }
      }
      with(CoolDrag.shadow.style){
       left = (CoolDrag.cloneobj.offsetLeft + 4) + "px";
       top = (CoolDrag.cloneobj.offsetTop + 4) + "px";
      }
      //document.title = CoolDrag.cloneobj.style.left + "|" + CoolDrag.shadow.style.left;
    },
      

  3.   


    end:function(e){
      if(!CoolDrag.dragged)return;
      CoolDrag.obj.className = "dragLayer";
      CoolDrag.dragged = false;
      CoolDrag.shadow.parentNode.removeChild(CoolDrag.shadow);
      CoolDrag.timer = CoolDrag.repos(150,15);
      //保存cookie
      var str="";
      for(var i=0; i<CoolDrag.container.childNodes.length; i++){
       var o = CoolDrag.container.childNodes[i];
       if(i>0)str += "|";
       str += o.id + ":";
       for(var j=0; j < o.childNodes.length; j++){
        if(j>0)str += ",";
        str += o.childNodes[j].id ;
       }
      }
      CoolDrag.save("cooldrag",str,24);
    },
    repos:function(aa,ab){
      //var f=CoolDrag.obj.filters.alpha.opacity;
      var tl=getRealLeft(CoolDrag.cloneobj);
      var tt=getRealTop(CoolDrag.cloneobj);
      var kl=(tl-getRealLeft(CoolDrag.obj))/ab;
      var kt=(tt-getRealTop(CoolDrag.obj))/ab;
      //var kf=f/ab;
      return setInterval(function(){if(ab<1){
            clearInterval(CoolDrag.timer);
            CoolDrag.cloneobj.parentNode.removeChild(CoolDrag.cloneobj);
            CoolDrag.obj=null;
            return;
           }
          ab--;
          tl-=kl;
          tt-=kt;
          //f-=kf;
          CoolDrag.cloneobj.style.left=parseInt(tl)+"px";
          CoolDrag.cloneobj.style.top=parseInt(tt)+"px";
          //CoolDrag.tdiv.filters.alpha.opacity=f;
         }
    ,aa/ab)
    },
    min:function(e){
      if(!e) e = window.event;
      var obj = getT(e);
      var rootObj = obj.parentNode.parentNode.parentNode;
      var id = rootObj.id;
      if(SavedObject.getStatus(id)[1]){ 
       SavedObject.setStatus(id,0);  
       rootObj.style.height = "20px";
       rootObj.childNodes[1].style.display = 'none'; 
      }else{
       SavedObject.setStatus(id,1);  
       rootObj.lastChild.style.display = ''; 
       rootObj.style.height = SavedObject.getStatus(id)[2]; 
      }
      obj.innerHTML = obj.innerHTML==0 ? 2 :0;
    },
    close:function(e){
      if(!e) e = window.event;
      var obj = getT(e);
      var rootObj = obj.parentNode.parentNode.parentNode;
      rootObj.parentNode.removeChild(rootObj);
    },
    save:function(name, value, hours){
      var expire = "";
      if(hours != null)
      {
      expire = new Date((new Date()).getTime() + hours * 3600000);
      expire = "; expires=" + expire.toGMTString();
      }
      document.cookie = name  + "=" + escape(value) + expire;
    },
    read:function(name){
      var cookieValue = "";
      var search = name + "=";
      if(document.cookie.length > 0)
      { 
      offset = document.cookie.indexOf(search);
      if (offset != -1)
      { 
        offset += search.length;
        end = document.cookie.indexOf(";", offset);
        if (end == -1) end = document.cookie.length;
        cookieValue = unescape(document.cookie.substring(offset, end))
      }
      }
      return cookieValue;
    }
    }
    function $(id){
    return document.getElementById(id);
    }
    function getT(e){
    return e.target || e.srcElement;
    }
    function getMouseX(e){
    return e.pageX ? e.pageX : e.clientX + document.body.scrollLeft - document.body.clientLeft;
    }
    function getMouseY(e){
    return e.pageY ? e.pageY : e.clientY + document.body.scrollTop  - document.body.clientTop;
    }
    function getRealLeft(o){
    var l = 0;
    while(o){
      l += o.offsetLeft - o.scrollLeft;
      o = o.offsetParent;
    }
    return(l);
    }
    function getRealTop(o){
    var t = 0;
    while(o){
      t += o.offsetTop - o.scrollTop;
      o = o.offsetParent;
    }
    return(t);
    }
    function cleanWhitespace(node) {
         var notWhitespace = /\S/;
         for (var i=0; i < node.childNodes.length; i++) {
             var childNode = node.childNodes[i];
             if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
                 node.removeChild(node.childNodes[i]);
                 i--;
             }
             if (childNode.nodeType == 1) {
                 cleanWhitespace(childNode);
             }
         }
    }
    var SavedObject={
    elements : new Array(),
    setStatus : function(id,s){
      for(var i=0;i<SavedObject.elements.length;i++){
       if(SavedObject.elements[i][0]==id){
        SavedObject.elements[i][1]=s;
        break;
       }
      }
    },
    getStatus : function(id){
      for(var i=0;i<SavedObject.elements.length;i++){
       if(SavedObject.elements[i][0]==id)return SavedObject.elements[i];
      }
    },
    push : function(o){
      SavedObject.elements[SavedObject.elements.length]=o;
    }
    }
    </script>
    </head>
    <body onLoad="CoolDrag.init('container');">
    <br />
    <div id="container">
    <div id="leftcontainer">
    <div style="height:100px; width:200px; " class="dragLayer" id="win1">
      <div class="dragHeader">
       <div style="float:left">第一个窗口</div>
       <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
      </div>
      <div class="content">window 1</div>
    </div>
    <div style="height:100px; width:200px; " class="dragLayer" id="win2">
      <div class="dragHeader">
       <div style="float:left">第二个窗口</div>
       <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
      </div>
      <div class="content">window 2</div>
    </div>
    </div>
    <div id="middlecontainer">
    <div style="height:100px; width:200px; " class="dragLayer" id="win3">
      <div class="dragHeader">
       <div style="float:left">第三个窗口</div>
       <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
      </div>
      <div class="content">window 3</div>
    </div>
    <div style="height:100px; width:200px; " class="dragLayer" id="win4">
      <div class="dragHeader">
       <div style="float:left">第四个窗口</div>
       <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
      </div>
      <div class="content">window 4</div>
    </div>
    </div>
    <div id="rightcontainer">
    <div style="height:100px; width:200px; " class="dragLayer" id="win5">
      <div class="dragHeader">
       <div style="float:left">第五个窗口</div>
       <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
      </div>
      <div class="content">window 5</div>
    </div>
    <div style="height:100px; width:200px; " class="dragLayer" id="win6">
      <div class="dragHeader">
       <div style="float:left">第六个窗口</div>
       <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
      </div>
      <div class="content">window 6</div>
    </div>
    <div style="height:100px; width:200px; " class="dragLayer" id="win7">
      <div class="dragHeader">
       <div style="float:left">第七个窗口</div>
       <div style="float:right; "><span class="min">0</span><span class="close">r</span></div>
      </div>
      <div class="content">window 7</div>
    </div>
    </div>
    </div>
    </body>
    </html>