设为首页设为首页
 添加收藏添加收藏
 进入音乐版音 乐 版
首页 文学作品 网页设计 平面设计 程序设计 考试认证 基础办公 QQ资源 服务器架设 网站运营 网页资源
  汉南在线 → 网页设计 → JavaScript脚本

JS实现网页中层的拖动(支持FireFox)
作  者：匿名
关键字：JavaScript



 

mydrag.htm文件内容

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
td{font-size:12px}
.box{margin-bottom:20px;background-color:#FFFFFF;}
table.boxTable{border:1px solid #336699;width:100%;}
td.boxHeader{padding:3px;font-weight:bold;border-bottom:1px solid #336699;background-color:#EFEFEF;}
td.boxBody{padding:2px;}
#cell1,#cell2,#cell3{width:320px;}
</style>
<script language="javascript" src="drag.js"></script>
<script language="javascript">
window.onload = function()
{
 var __table = document.getElementById("MainTable");
 initDrag(__table);
}
</script>
</head>

<body>
<table width="980" border="0" cellpadding="0" cellspacing="0" id="MainTable">
  <tr>
    <td align="center" valign="top" id="cell1">
 <div style="position:relative;" class="box" id="drag_box_1">
 <table border="0" cellspacing="0" cellpadding="0" class="boxTable">
  <tr>
    <td align="left" class="boxHeader" id="drag_box_1_header">TD1</td>
  </tr>
  <tr>
    <td align="left" class="boxBody"><p>fds<br />
      fds<br />
      fdsfdsfsd<br />
      fdsfsdfsdfsdfdsfds<br />
    fds</p>      </td>
  </tr>
</table>
</div>
<div style="position:relative;" class="box" id="drag_box_2">
 <table border="0" cellspacing="0" cellpadding="0" class="boxTable">
  <tr>
    <td align="left" class="boxHeader" id="drag_box_2_header">TD2</td>
  </tr>
  <tr>
    <td align="left" class="boxBody"><p>fds<br />
      fds<br />
      fdsfdsfsd<br />
      fdsfsdfsdfsdfdsfds<br />
    fds</p>      </td>
  </tr>
</table>
</div>
<div></div>
</td><td width="20">&nbsp;</td>
    <td align="center" valign="top" id="cell2"><div style="position:relative;" class="box" id="drag_box_3">
      <table border="0" cellspacing="0" cellpadding="0" class="boxTable">
        <tr>
          <td align="left" class="boxHeader" id="drag_box_3_header">TD3</td>
        </tr>
        <tr>
          <td align="left" class="boxBody"><p>fds<br />
            fds<br />
            fdsfdsfsd<br />
            fdsfsdfsdfsdfdsfds<br />
            fds</p></td>
        </tr>
      </table>
    </div>
      <div style="position:relative;" class="box" id="drag_box_4">
        <table border="0" cellspacing="0" cellpadding="0" class="boxTable">
          <tr>
            <td align="left" class="boxHeader" id="drag_box_4_header">TD4</td>
          </tr>
          <tr>
            <td align="left" class="boxBody"><p>fds<br />
              fds<br />
              fdsfdsfsd<br />
              fdsfsdfsdfsdfdsfds<br />
            fds</p></td>
          </tr>
        </table>
    </div>
 <div></div>
 </td>
    <td width="20">&nbsp;</td>
    <td align="center" valign="top" id="cell3"><div style="position:relative;" class="box" id="drag_box_5">
      <table border="0" cellspacing="0" cellpadding="0" class="boxTable">
        <tr>
          <td align="left" class="boxHeader" id="drag_box_5_header">TD5</td>
        </tr>
        <tr>
          <td align="left" class="boxBody"><p>fds<br />
            fds<br />
            fdsfdsfsd<br />
            fdsfsdfsdfsdfdsfds<br />
            fds</p></td>
        </tr>
      </table>
    </div>
      <div style="position:relative;" class="box" id="drag_box_6">
        <table border="0" cellspacing="0" cellpadding="0" class="boxTable">
          <tr>
            <td align="left" class="boxHeader" id="drag_box_6_header">TD6</td>
          </tr>
          <tr>
            <td align="left" class="boxBody"><p>fds<br />
              fds<br />
              fdsfdsfsd<br />
              fdsfsdfsdfsdfdsfds<br />
            fds</p></td>
          </tr>
        </table>
    </div>
 <div></div>
 </td>
  </tr>
</table>
</body>
</html>


drag.js文件内容

var Utility = {};
Utility.bindFunction = function(ele,fun)
{
 return function()
 {
  return ele[fun].apply(ele,arguments);
 }
}
Utility.recordPosition = function(ele)
{
 for(var i=0;i<Utility.dragArray.length;i++)
 {
  var cur = Utility.dragArray[i];
  cur.pagePosLeft = Utility.getPos(cur.Element,"left");
  cur.pagePosTop = Utility.getPos(cur.Element,"top");
 }
 var nextSb = ele.Element.nextSibling;
 while(nextSb)
 {
  nextSb.pagePosTop -= ele.Element.offsetHeight;
  nextSb = nextSb.nextSibling;
 }
}
Utility.getPos = function(ele,dir)
{
 var rtn = 0;
 while(ele)
 {
  rtn += parseInt(ele["offset" + (dir == "left" ? "Left" : "Top")]);
  ele = ele.offsetParent;
 }
 return rtn;
}
Utility.hideMainTable = function()
{
 if(this.root)
  this.root.style.display = "none";
}
Utility.showMainTable = function()
{
 if(this.root)
  this.root.style.display = "block";
}
Utility.fixEvent = function(eve)
{
 if(typeof eve == "undefined")
  eve = window.event;
 if(typeof eve.layerX == "undefined")
  eve.layerX = eve.offsetX;
 if(typeof eve.layerY == "undefined")
  eve.layerY = eve.offsetY;
 if(typeof eve.which == "undefined")
  eve.which = eve.button;
 return eve;
}

function initDrag(ele)
{
 if(!ele)return;
 Utility.root = ele;
 Utility.column = Utility.root.rows[0].cells;
 Utility.dragArray = [];
 for(var i=0;i<Utility.column.length;i++)
 {
  var curColumn = Utility.column[i];
  for(var j=0;j<curColumn.childNodes.length;j++)
  {
   var curEle = curColumn.childNodes[j];
   if(curEle.tagName == "DIV")
    Utility.dragArray.push(new dragElement(curEle));
  }
 }
}

function dragElement(ele)
{
 this.dragStart = startDrag;
 this.drag = whenDrag;
 this.dragEnd = endDrag;
 this.isDraging = false;
 this.Element = ele;
 this.Header = document.getElementById(this.Element.id + "_header");
 if(this.Header)
 {
  //绑定事件
  this.Header.style.cursor = "move";
  //逐个初始化
  Drag.init(this.Element,this.Header);
  this.Element.onDragStart = Utility.bindFunction(this,"dragStart");
  this.Element.onDrag = Utility.bindFunction(this,"drag");
  this.Element.onDragEnd = Utility.bindFunction(this,"dragEnd");
 }
}

function startDrag()
{
 Utility.recordPosition(this);
 //记录下一兄弟节
 this.origNextSibling = this.Element.nextSibling;
 var dotBox = DotBox.getDotBox();
 var offW = this.Element.offsetWidth;
 var offH = this.Element.offsetHeight;
 var offL = Utility.getPos(this.Element,"left");
 var offT = Utility.getPos(this.Element,"top");
 Utility.hideMainTable();
 //这个不把dotbox的宽也搞一样是因为如果一样了会把父TD涨宽,让它自适应
 this.Element.style.width = (offW + "px");
 dotBox.style.height = this.Element.style.height = (offH + "px");
 this.Element.parentNode.insertBefore(dotBox,this.origNextSibling);
 this.Element.style.left = offL;
 this.Element.style.top = offT;
 this.Element.style.position = "absolute";
 this.Element.style.zIndex = 9999;
 this.isDraging = false;
 Utility.showMainTable();
}

function whenDrag(x,y)
{
 if(!this.isDraging)
 {
  this.Element.style.filter = "alpha(opacity=70)";
  this.Element.style.opacity = 0.7;
  this.isDraging = true;
 }
 //遍历dragArray数组,查找离自己最近的对象
 var foundEle = null;
 var maxDistance = 1000000000;
 for(var i=0;i<Utility.dragArray.length;i++)
 {
  var cur = Utility.dragArray[i];
  var distance = Math.sqrt(Math.pow(x - cur.pagePosLeft,2) + Math.pow(y - cur.pagePosTop,2));
  if(isNaN(distance))
   continue;
  if(cur == this)
   continue;
  if(distance < maxDistance)
  {
   maxDistance = distance;
   foundEle = cur;
  }
 }
 //插入dotBox
 var dotBox = DotBox.getDotBox();
 if(foundEle != null && dotBox.nextSibling != foundEle.Element)
  foundEle.Element.parentNode.insertBefore(dotBox,foundEle.Element);
}

function endDrag()
{
 Utility.hideMainTable();
 this.Element.style.width = "";
 this.Element.style.left = "";
 this.Element.style.top = "";
 this.Element.style.position = "relative";
 this.Element.style.zIndex = "";
 this.Element.style.filter = "";
 this.Element.style.opacity = "";
 //删除dotBox
 var dotBox = DotBox.getDotBox();
 if(dotBox.nextSibling != this.origNextSibling)
 {
  dotBox.parentNode.insertBefore(this.Element,dotBox.nextSibling);
 }
 dotBox.parentNode.removeChild(dotBox);
 Utility.showMainTable();
 
 //保存位置!!
 //xmlhttp send to server;
}

var Drag = {
 object : null,
 init : function(ele,header)
 {
  header.onmousedown = Drag.start;
  header.object = ele;
  if(isNaN(parseInt(ele.style.left)))
   ele.style.left = "0px";
  if(isNaN(parseInt(ele.style.top)))
   ele.style.top = "0px";
  //初始化
  ele.onDragStart = new Function();
  ele.onDrag = new Function();
  ele.onDragEnd = new Function();
 },
 start : function(eve)
 {
  var element = Drag.object = this.object;
  eve = Utility.fixEvent(eve);
  if(eve.which != 1)
   return;
  element.onDragStart();
  //记录位置
  element.lastMouseX = eve.clientX;
  element.lastMouseY = eve.clientY;
  document.onmousemove = Drag.drag;
  document.onmouseup = Drag.end;
 },
 drag : function(eve)
 {
  eve = Utility.fixEvent(eve);
  if(eve.which != 1)
   Drag.end();
  var element = Drag.object;
  var curX = eve.clientX;
  var curY = eve.clientY;
  if(element.lastMouseX == curX && element.lastMouseY == curY)
  {
   //alert("fds");
   return;
  }
  var lastX = parseInt(element.style.left);
  var lastY = parseInt(element.style.top);
  var newX,newY;
  newX = lastX + curX - element.lastMouseX;
  newY = lastY + curY - element.lastMouseY;
  element.style.top = newY + "px";
  element.style.left = newX + "px";
  element.lastMouseX = curX;
  element.lastMouseY = curY;
  element.onDrag(newX,newY);
 },
 end : function(eve)
 {
  document.onmousemove = null;
  document.onmouseup = null;
  Drag.object.onDragEnd();
  Drag.object = null;
 }
};

var DotBox = {
 dotBox : null,
 getDotBox : function()
 {
  if(!DotBox.dotBox)
  {
   var _dotbox = document.createElement("DIV");
   _dotbox.className = "box";
   _dotbox.backgroundColor = "transparent";
   _dotbox.style.border = "1px dashed #CCCCCC";
   _dotbox.innerHTML = "&nbsp;";
   DotBox.dotBox = _dotbox;
  }
  return DotBox.dotBox;
 }
};



来源：网络
阅读：4 次
日期：2008-11-19

【 双击滚屏 】 【 收藏 】 【 打印 】 【 关闭 】 【 字体：大 中 小 】 
上一篇：表单验证方式的通用化
下一篇：JS实现网页中层的旋转

  >> 相关文章
 
  ·表单验证方式的通用化
  ·通用化Web表单验证方式的改进方案
  ·Web设计中如何使用XML数据
  ·在XHTML 1.1中实现target="_blank"新窗口打开页面
  ·JS中字符串比较用equals()的方法
  ·HTML代码过滤工具
  ·js 数值格式化方法
  ·当第一个菜单选中“a3”时，使第二个菜单失效(表单失效的方法 javascript)
授权使用：汉南在线 http://www.hzwz.net/(2008-2009)   
Copyright (c) 2002-2007 汉南在线. All Rights Reserved . 
经营许可证：陕ICP备05000109号 Powered by：汉南在线