`

纯js操作div移动

UP 
阅读更多 
<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);
  
  return div;
 }
 
 var oX, oY, oLeft, oTop, oWidth, oHeight; //存储原始移动前的位置
 var divClone, oDiv;   //克隆的节点和原始节点
 var oTime;
 //clone拖移的节点
 function setMove(obj)
 {
  if (event.button == 1)
  {
   if (oTime)
   {
    clearTimeout(oTime);
    divClone.parentNode.removeChild(divClone);
   }
   oDiv = obj.parentNode;
   divClone = oDiv.cloneNode(true);
   divClone.style.filter = "Alpha(opacity=50)";
   divClone.childNodes[1].setAttribute("onmousemove", function(){startMove(this)});
   divClone.childNodes[1].setAttribute("onmouseup", function(){endMove()});
   oX = parseInt(event.clientX);
   oY = parseInt(event.clientY);
   oLeft = parseInt(divClone.style.left);
   oTop = parseInt(divClone.style.top);
   document.body.appendChild(divClone);
   divClone.childNodes[1].setCapture();
   eventType = "move";
  }
 }
 
 //拖移
 function startMove(obj)
 {
  if (eventType == "move" && event.button == 1)
  {
   var moveDiv = obj.parentNode;
   moveDiv.style.left = (oLeft + event.clientX - oX) + "px";
   moveDiv.style.top = (oTop + event.clientY - oY) + "px";
  }
 }
 
 //拖移结束调用动画
 function endMove()
 {
  if (eventType == "move")
  {
   divClone.childNodes[1].releaseCapture();
            move(parseInt(divClone.style.left), parseInt(divClone.style.top));
   eventType = "";
  }
 }
 
 //移动的动画
 function move(aimLeft, aimTop)
 {
  var nowLeft = parseInt(oDiv.style.left);
  var nowTop = parseInt(oDiv.style.top);
  var moveSize = 30;
  if (nowLeft > aimLeft + moveSize || nowLeft < aimLeft - moveSize || nowTop > aimTop + moveSize || nowTop < aimTop - moveSize)
  {
   oDiv.style.left = aimLeft > nowLeft + moveSize ? (nowLeft + moveSize) + "px" : aimLeft < nowLeft - moveSize ? (nowLeft - moveSize) + "px" : nowLeft + "px";
   oDiv.style.top = aimTop > nowTop + moveSize ? (nowTop + moveSize) + "px" : aimTop < nowTop - moveSize ? (nowTop - moveSize) + "px" : nowTop + "px";
   oTime = setTimeout("move(" + aimLeft + ", " + aimTop + ")", 1);
  }
  else
  {
   oDiv.style.left = divClone.style.left;
   oDiv.style.top = divClone.style.top;
   divClone.parentNode.removeChild(divClone);
   divClone == null;
  }
 }
 
 //clone调整大小的节点
 function setResize(obj)
 {
  if (event.button == 1)
  {
   if (oTime)
   {
    clearTimeout(oTime);
    divClone.parentNode.removeChild(divClone);
   }
   oDiv = obj.parentNode;
   divClone = oDiv.cloneNode(true);
   divClone.style.filter = "Alpha(opacity=50)";
   divClone.childNodes[4].setAttribute("onmousemove", function(){startResize(this)});
   divClone.childNodes[4].setAttribute("onmouseup", function(){endResize()});
   oX = parseInt(event.clientX);
   oY = parseInt(event.clientY);
   oWidth = parseInt(divClone.style.width);
   oHeight = parseInt(divClone.style.height);
   document.body.appendChild(divClone);
   divClone.childNodes[4].setCapture();
   eventType = "resize";
  }
 }
 
 //拖动调整大小
 function startResize(obj)
 {
  if (eventType == "resize" && event.button == 1)
  {
   var nX = event.clientX;
   var nY = event.clientY;
   if (nX > oX - oWidth && nY > oY - oHeight + 40)
   {
    var resizeDiv = obj.parentNode;
    resizeDiv.style.width = (oWidth + event.clientX - oX) + "px";
    resizeDiv.style.height = (oHeight + event.clientY - oY) + "px";
    resizeDiv.childNodes[3].style.height = (parseInt(resizeDiv.style.height) - 40) + "px";
   }
  }
 }
 
 //调整大小结束
 function endResize()
 {
  if (eventType == "resize")
  {
   divClone.childNodes[4].releaseCapture();
            resize(parseInt(divClone.style.width), parseInt(divClone.style.height));
   eventType = "";
  }
 }
 
 //调整大小的动画
 function resize(aimWidth, aimHeight)
 {
  var nowWidth = parseInt(oDiv.style.width);
  var nowHeight = parseInt(oDiv.style.height);
  var resizeSize = 30;
  if (nowWidth > aimWidth + resizeSize || nowWidth < aimWidth - resizeSize || nowHeight > aimHeight + resizeSize || nowHeight < aimHeight - resizeSize)
  {
   oDiv.style.width = aimWidth > nowWidth + resizeSize ? (nowWidth + resizeSize) + "px" : aimWidth < nowWidth - resizeSize ? (nowWidth - resizeSize) + "px" : nowWidth + "px";
   oDiv.style.height = aimHeight > nowHeight + resizeSize ? (nowHeight + resizeSize) + "px" : aimHeight < nowHeight - resizeSize ? (nowHeight - resizeSize) + "px" : nowHeight + "px";
   oDiv.childNodes[3].style.height = (parseInt(oDiv.style.height) - 40) + "px";
   oTime = setTimeout("resize(" + aimWidth + ", " + aimHeight + ")", 1);
  }
  else
  {
   oDiv.style.width = divClone.style.width;
   oDiv.style.height = divClone.style.height;
   oDiv.childNodes[3].style.height = (parseInt(oDiv.style.height) - 40) + "px";
   divClone.parentNode.removeChild(divClone);
   divClone == null;
  }
 }
 
 //关闭DIV
 function eCloseDiv()
 {
  if (div)
  {
   div.parentNode.removeChild(div);
   var ipt = document.getElementsByTagName("input");
   for(var i = 0; i < ipt.length; i++)
   {
    ipt[i].disabled = false;
   }
   div = null;
  }
 }
 
 //保留位置和大小
 function saveDiv()
 {
  if (div)
  {
   saveLeft = div.style.left;
   saveTop = div.style.top;
   saveWidth = div.style.width;
   saveHeight = div.style.height;
   alert("保留成功！");
  }
 }
 
 //快捷键
 document.onkeydown = function()
 {
  event.keyCode == 27 ? eCloseDiv() : null;  //Esc快捷键
  event.ctrlKey && (event.keyCode == 83 || event.keyCode == 115) ? saveDiv() : null; //ctrl+s保存位置
  event.ctrlKey && event.keyCode == 13 ? setDiv() : null //ctrl+enter打开Div
  !event.ctrlKey && (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) ? arrowMove(event.keyCode) : null;
  event.ctrlKey && (event.keyCode == 37  || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) ? arrowResize(event.keyCode) : null;
 }
 
 //上下左右箭头移动div
 function arrowMove(eKeyCode)
 {
  if (div)
  {
   var isMove = document.getElementById("isMove").checked;
   if (isMove)
   {
    switch(eKeyCode)
    {
     case 37:
      div.style.left = (parseInt(div.style.left) - 1) + "px"; //left
      break
     case 38:
      div.style.top = (parseInt(div.style.top) - 1) + "px"; //up
      break
     case 39:
      div.style.left = (parseInt(div.style.left) + 1) + "px"; //right
      break
     case 40:
      div.style.top = (parseInt(div.style.top) + 1) + "px"; //down
      break
    }
   }
  }
 }
 
 //ctrl+上下左右箭头调整div大小
 function arrowResize(eKeyCode)
 {
  if (div)
  {
   var isResize = document.getElementById("isResize").checked;
   if (isResize)
   {
    switch(eKeyCode)
    {
     case 37:
      div.style.width = (parseInt(div.style.width) - 1) + "px"; //left
      break
     case 38:
      div.style.height = (parseInt(div.style.height) - 1) + "px"; //up
      break
     case 39:
      div.style.width = (parseInt(div.style.width) + 1) + "px"; //right
      break
     case 40:
      div.style.height = (parseInt(div.style.height) + 1) + "px"; //down
      break
    }
   }
  }
 }
</script>

 

<body>
<p>
 <input type="checkbox" id="isMove" /><label for="isMove">可移动</label>&nbsp;&nbsp;&nbsp;
 <input type="checkbox" id="isResize" /><label for="isResize">可调整大小</label>&nbsp;&nbsp;&nbsp;
</p>
  
<p>
 <input type="radio" name="radio" id="radio1" checked /><label for="radio1">默认居中打开</label>&nbsp;&nbsp;&nbsp;
 <input type="radio" name="radio" id="radio2" /><label for="radio2">保留位置上打开</label>
</p>
<p><a href="javascript:setDiv()">打开DIV</a></p>
<p style="font-weight: bold">操作说明：</p>
<ol>
 <li>
  选中复选框（可移动、可调整大小）后，打开的DIV具有移动/调整大小的功能(此时移动/调整大小快捷键可使用);<br>
  反之，不可移动/调整大小(此时移动/调整大小快捷键无效)
 </li>
 <li>
  单选框默认居中打开选中，无论有无保存DIV位置和大小均以默认位置及大小打开DIV
 </li>
 <li>
  单选框保留位置上打开选中，如果未发现保存记录以默认方式打开，否则以保存的位置及大小打开
 </li>
 <li>
  如果选中可移动后，鼠标经过标题位置（蓝色背景）处会变成移动的图标，此时按住鼠标左键会产生一个半透明的DIV，按住鼠标不动拉动此半透明DIV会跟随移动，释放鼠标左键后会产生一段原始位置移动至半透明位置的动画，当动画重叠时，半透明的DIV将回收。
 </li>
 <li>
  如果选中可调整大小后，鼠标经过整个DIV的最右下角处会变成伸缩的图标，此时按住鼠标左键会产生一个半透明的DIV，按住鼠标不动拉动此半透明DIV会随着移动而调整大小，释放鼠标左键后会产生一段原始大小伸缩至半透明大小的动画，当动画重叠时，半透明的DIV将回收。
 </li>
 <li>
  DIV的右上角有关闭按钮，按下后DIV将remove
 </li>
</ol> 
<p style="font-weight: bold">
 快捷键说明：
<ol>
 <li>
  Ctrl + Enter : 打开div
 </li>
 <li>
  Ctrl + s(大小写均可) : 保存div的大小和位置
 </li>
 <li>
  上下左右箭头 : 轻移div位置
 </li>
 <li>
  Ctrl + 上下左右箭头 : 轻调div大小
 </li>
 <li>
  Esc : 关闭Div
 </li>
</ol> 
</p>
</body>
</html>
分享到：
| js滑动条（拖动条）源代码
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    纯js操作div移动、伸缩，支持快捷键

    在本文中，我们将深入探讨如何使用纯JavaScript来操作HTML中的`div`元素，实现其在页面上的移动和伸缩，...结合提供的"纯js操作div移动、伸缩，支持快捷键.html"文件，你可以看到这些概念如何在实际代码中得到应用。

    纯js操作div移动 伸缩，支持快捷键

    以上就是使用纯JavaScript操作div移动、伸缩以及支持快捷键的基本方法。通过这种方式，你可以创建出动态、交互丰富的Web界面。记住，实践是检验真理的唯一标准，动手编写代码并进行测试是掌握这些技能的关键。在实际...

    纯JS控制DIV选择范围移动与复制

    纯JS控制DIV选择范围移动与复制

    DIV 拖动 JS移动DIV DIV位置移动

    DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动

    纯JS控制DIV选择范围移动与复制 改进版

    &lt;br&gt;移动位置，选中DIV后，如果单选组选中移动(-)（默认，快捷键为“-”）按住左键拖动位置后释放可批量移动位置，产生一段过度动画，不撤销选择的DIV可多次移动，如已移动完毕按Ctrl+Z撤销选择即可。...

    js实现div移动,代码很简洁明了

    js实现div移动,代码很简洁明了 通过js 实现div的移动,代码量很少,,一看就明白的.

    纯JS控制DIV选择范围移动与复制(改进版)

    &lt;br&gt;移动位置，选中DIV后，如果单选组选中移动(-)（默认，快捷键为“-”）按住左键拖动位置后释放可批量移动位置，产生一段过度动画，不撤销选择的DIV可多次移动，如已移动完毕按Ctrl+Z撤销选择即可。...

    js控制层和DIV+CSS实现TAB菜单

    在文件"纯js操作div移动、伸缩，支持快捷键.html"中，我们可以预见到它可能包含了一个示例，演示了如何使用JavaScript来操纵Div的移动和伸缩，并且响应键盘快捷键。这可能涉及到DOM（Document Object Model）操作，...

    DiV层移动实例（纯JS仿赛我的个人小窝）

    通过以上技术，我们可以创建出一个纯JavaScript实现的DiV层移动实例，模仿“赛我的个人小窝”的效果。这个实例不仅展示了JavaScript与CSS的结合应用，还涉及到了用户交互、动画原理和性能优化等多个方面的知识点。...

    js移动div源代码

    5. **动画效果**：如果希望div移动过程平滑，可以使用`requestAnimationFrame()`来创建动画效果，每次更新坐标并重绘，直到div到达目标位置。 例如，一个简单的div拖拽功能的实现可能如下： ```javascript let ...

    DIV移动组件JavaScript

    `DIV` 移动组件是利用 JavaScript 实现的一种交互效果，允许用户通过编程方式控制 `DIV` 层的位置，为网页增添动态性和交互性。这种组件在网页设计、游戏开发或者复杂用户界面中都有广泛应用。 JavaScript 是一种轻...

    纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线（包含箭头）

    纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线，外部资源仅需要jquery。有以下功能： 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...

    div移动块（用于web上的小移动栏）

    接下来，我们来看看JavaScript是如何实现div移动的。在JavaScript中，我们可以获取到页面上的特定元素，比如`document.getElementById()`或`document.querySelector()`方法。然后，我们可以添加事件监听器，如`...

    JS实现鼠标拖动div移动(附效果演示).zip

    在JavaScript中，实现鼠标拖动div移动的效果是前端开发中常见的交互设计，它涉及到DOM操作、事件处理以及坐标计算等多个知识点。以下将详细介绍这个过程。 首先，我们需要理解`div`在HTML中的作用。`div`元素是块级...

    3个js拖动DIV移动位置的特效代码.rar

    本下载包包括了3个js拖动特效，拖动DIV移动指定位置，一个实例是任意位置的拖动，不受限制，想拖动到哪里就拖动到哪里；另一个是指定位置的拖动，由左侧拖动到右侧指定位置，拖动结束后，左侧会少一个DIV，右侧新增...

    js移动层和跟随鼠标的div

    在JavaScript编程中，创建一个移动...综上所述，"js移动层和跟随鼠标的div"涉及了JavaScript事件处理、DOM操作、CSS样式布局以及动画效果的实现。通过理解并实践这些知识点，开发者可以创建出更多有趣的网页交互元素。

    div移动并且排序的代码

    本项目探讨的核心是“div移动并且排序的代码”，这意味着我们将在一个交互式的环境中，允许用户通过拖放操作来调整`div`元素的位置，从而实现页面布局的动态调整。这种功能通常涉及到JavaScript和CSS3技术，特别是...

    移动div(jquery)

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画效果以及Ajax交互。标题“移动div(jquery)”暗示我们将讨论如何使用jQuery来实现div元素的动态移动效果，这...

    采用纯js方式实现网页DIV元素的动态拖动及位置移动操作程序

    通过这个纯JavaScript实现的动态拖动及位置移动操作程序，我们可以学习到JavaScript事件处理机制、DOM操作以及简单的CSS布局技巧。了解这些基础知识对于前端开发者来说至关重要，它们是构建交互式网页应用的基础。而...

    DIV移动并排序JS效果

    总结，"DIV移动并排序JS效果"是网页动态化和交互性的重要体现，通过熟练掌握JavaScript对DOM的操作和事件处理，开发者可以创造出丰富的用户体验。实际应用中，结合CSS样式和JavaScript脚本，可以实现各种各样的动态...

Magicbox
Global site tag (gtag.js) - Google Analytics