纯js操作div腾挪-JavaSript-爱易网页

纯js操作div腾挪

日期：2014-05-16　浏览次数：20389 次

纯js操作div移动

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <title>Div拖动/调整大小实例</title>
</head>

 

<script type="text/javascript">
 //保留的位置
 var saveLeft,saveTop,saveWidth,saveHeight;
 var theBody;
 var eventType;    //事件种类, "move"、"resize"
 var div;
 
 //创建并设定div的参数
 function setDiv()
 {
  //防止重复打开
  if (div)
  {
   return;
  }
  var newLeft,newTop,newWidth,newHeight;
  theBody = document.body;
  
  div = document.createElement("div");
  div.id = "panelDiv";
  div.style.position = "absolute";
  div.style.backgroundColor = "#E5E5E5"
  div.style.padding = "2px 5px 5px 2px";
  div.style.overflow = "hidden";
  div.style.zIndex = 1;
  
  //设定打开的大小和位置
  Function()
  {
   var openType = document.getElementById("radio1").checked ? 0 : 1;
   if (openType == 0)   //默认大小默认位置居中打开
   {
    newWidth = "300px";
    newHeight = "300px";
    newLeft = (theBody.clientWidth - parseInt(newWidth)) / 2 + "px";
    newTop = (theBody.clientHeight - parseInt(newHeight)) / 2 + "px";
   }
   else //存储的位置与大小
   {
    newWidth = saveWidth ? saveWidth : "300px";
    newHeight = saveHeight ? saveHeight : "300px";
    newLeft = saveLeft ? saveLeft : (theBody.clientWidth - parseInt(newWidth)) / 2 + "px";
    newTop = saveTop ? saveTop : (theBody.clientHeight - parseInt(newHeight)) / 2 + "px";
   }
   div.style.width = newWidth;
   div.style.height = newHeight;
   div.style.left = newLeft;
   div.style.top = newTop;
  }
  div = setChild(div);
  theBody.appendChild(div);
  
  var ipt = document.getElementsByTagName("input");
  for(var i = 0; i < ipt.length; i++)
  {
   ipt[i].disabled = true;
  }
 }
 
 function setChild(div)
 {
  //可否移动、调整
  var isMove = document.getElementById("isMove").checked;
  var isResize = document.getElementById("isResize").checked;
  
  //底色
  var cDiv = document.createElement;
  var backDiv = cDiv("div");
  backDiv.style.cssText = "left: 0px; top: 0px; width: 100%; height: 100%; background-color: #F5F5F5;";
  div.appendChild(backDiv);
  
  //标题
  var topDiv = cDiv("div");
  topDiv.style.cssText = "left: 2px; top: 2px; width: 100%; height: 30px; position: absolute; background-color: #78ABFF; vertical-align: middle; z-index: 5";
  if (isMove)
  {
   topDiv.style.cursor = "move";
   topDiv.setAttribute("onmousedown", function(){setMove(this)});
  }
  else
  {
   topDiv.style.cursor = "default";
  }
  topDiv.innerHTML = "<span style='top: 5px; left:5px; font-size: 20px; font-weight: bold; color: #102548; position: relative;' onselectstart='return false'>标题栏</span>";
  div.appendChild(topDiv);
  
  //关闭按钮
  var closeDiv = cDiv("div");
  closeDiv.style.cssText = "right: 8px; top : 5px; width: 24px; height: 24px; position: absolute; background-color: #E4EEFF; border: #2D66C4 1px solid; text-align: center; vertical-align: middle; cursor: pointer; z-index: 10";
  closeDiv.setAttribute("onclick", function() {eCloseDiv()});
  closeDiv.innerHTML = "<span style='font-size: 20px; font-weight: bold; color: #0E377A;' title='Esc快捷键'>×</span>";
  div.appendChild(closeDiv);
  
  //内容
  var contentDiv = cDiv("div");
  contentDiv.style.cssText = "left: 2px; top: 35px; width: 100%; position: absolute; overflow: auto";
  contentDiv.style.height = (parseInt(div.style.height) - 40) + "px";
  contentDiv.innerHTML = "<table style='width: 100%; height: 100%; text-align: center; vertical-align: hidden'><tr><td><p>这里是内容区！</p><a href='javascript:saveDiv()'>保留这个位置和大小</a></td></tr></table>";
  div.appendChild(contentDiv);
  
  //调整大小
  var reDiv = cDiv("div");
  reDiv.style.cssText = "right: 0px; bottom: 0px; width: 5px; height: 5px; position: absolute;";
  if (isResize)
  {
   reDiv.style.cursor = "se-resize";
   reDiv.setAttribute("onmousedown", function(){setResize(this)});
  }
  else
  {
   reDiv.style.cursor = "default";
  }
  div.appendChild(reDiv);
  
  retur

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

纯js操作div腾挪

相关资料更多>

推荐阅读更多>