0顶

页面中可任意拖动的层

稿源：互联网 2022-06-21 10:49:36 点击： 527 撤稿纠错

页面中可任意拖动的层，效果非常好，代码实用。

以下讨论的是和相关的页面中可任意拖动的层教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>页面中可任意拖动的层，zzjs.net收集。</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);
//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  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);
   }
  }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  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)
  { //欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  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;
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 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];
  }
 },//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 push : function(o){
  SavedObject.elements[SavedObject.elements.length]=o;
 }
}
</script>
</head>
<body onLoad="CoolDrag.init('container');">
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<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">sky提示您：这个是window 1
欢迎来到我们的网站：<a href="http://www.zzjs.net">站长特效网</a></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">sky提示您：这个是window 2
欢迎来到我们的网站：<a href="http://www.zzjs.net">站长特效网</a></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">sky提示您：这个是window 3
欢迎来到我们的网站：<a href="<#ZC_BLOG_HOST#>?cat=3">站长特效网</a></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">sky提示您：这个是window 4
欢迎来到我们的网站：<a href="<#ZC_BLOG_HOST#>?cat=2">站长特效网</a></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">sky提示您：这个是window 5
欢迎来到我们的网站：<a href="<#ZC_BLOG_HOST#>?cat=1">站长特效网</a></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">sky提示您：这个是window 6
欢迎来到我们的网站：<a href="<#ZC_BLOG_HOST#>?cat=4">站长特效网</a></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">sky提示您：这个是window 7
欢迎来到我们的网站：<a href="<#ZC_BLOG_HOST#>?cat=5">站长特效网</a></div>
 </div>
</div>
</div>
</body>
</html>

关于页面中可任意拖动的层的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016306862440.shtml方便下次再访问哦。

·上一篇： js展开层效果
·下一篇： 获取当前页面地址栏地址的asp代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

页面中可任意拖动的层

文章分类LIST >>返回首页

最新游戏

最新新闻