类似chinaren的DIV 拖动

最新推荐文章于 2020-04-30 10:46:13 发布

野猪没我野

最新推荐文章于 2020-04-30 10:46:13 发布

阅读量482

点赞数

分类专栏： javascript 文章标签： div class function float null filter

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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;
     },

     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;
     },

     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>

野猪没我野

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似chinaren的DIV 拖动

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Drag & Dropbody{ background-color:#36393D; font-size:12px; margin:0px; }DIV.dragLayer{ border:1px solid #369
复制链接

扫一扫