方法一：
代码的基本思想是：把要拖动的控件（可以是table,div,input等任何html标签）看成是元素（element）,然后这些元素需要有一个空间让他们可以拖动，我把这个称作容器(container)，把在容器里面鼠标的拖动距离加到元素的style.left和style.top那里，那么元素的位置就发生改变，这样就实现了拖动的效果。
代码的使用方法，就像下面的示例一样，首先要指定一个container,我这里是把body作为container,所以给body一个属性dragType="container"，然后在这个container的内部指定一个或者多个你要移动的元素，我这里移动的是一个table，因此，给table加一个属性dragType="element"，注意element一定要是container的子节点。最后，需要一个动作来让开启这个拖动效果，等于一个开关的作用，这里我需要页面加载的时候就可以让鼠标拖动，因此我把enableDragElements()函数放在了body的onload事件里面，这样就可以了,运行页面，就可以用鼠标拖动了。
/**********************************************************************************
//文件说明
文件名：DragLayerBuilder.js
描述：使页面上的元素能够让鼠标拖动
作者：bingo.chuan
最后修改日期：2006年11月24日
示例：
<body id="body" onload="enableDragElements()" dragType="container">
<table id="table1" border="1" cellpadding="0" cellspacing="0" dragType="element">
<tr>
<td colspan="3">标题1
</td>
</tr>
<tr>
<td>aa:
</td>
<td>
<input id="Text1" type="text" />
</td>
<td>label1
</td>
</tr>
<tr>
<td>bb:
</td>
<td>
<input id="Text2" type="text" />
</td>
<td>label2
</td>
</tr>
</table>
</body>
**********************************************************************************/
//attribute：属性
//当前存放移动元素的容器
var container = null;
//当前正在移动的元素
var draggingElement = null;
//存放拖拉过程的点位置
var oldLeft = 0;
var oldTop = 0;
//是否要开启透明效果
var enableOpacity = true;
/*********************************************************************************/
//public : 对外开放的接口
function enableDragElements()
{
for(var i=0;i<document.all.length;i++)
{
if(document.all[i].dragType && document.all[i].dragType == "container")
{
container = document.all[i];
container.style.height = "100%";
container.onmousedown = doContainerMouseDown;
container.onmouseup = doContainerMouseUp;
container.onmousemove = doContainerMouseMove;
}
if(document.all[i].dragType && document.all[i].dragType == "element")
{
document.all[i].style.position = "absolute";
document.all[i].style.left = document.all[i].style.left ? document.all[i].style.left:0;
document.all[i].style.top = document.all[i].style.top ? document.all[i].style.top:0;
}
}
}
/*********************************************************************************/
//private : 内部方法
function doContainerMouseDown()
{
draggingElement = event.srcElement;
if(draggingElement == null)
{
return;
}
else
{
oldLeft = event.x;
oldTop = event.y;
while( draggingElement && (!draggingElement.dragType || draggingElement.dragType != "element"))
{
draggingElement = draggingElement.parentElement;
}
container = draggingElement;
while( draggingElement && (!container.dragType || container.dragType != "container"))
{
container = container.parentElement;
}
}
}
function doContainerMouseMove()
{
if(draggingElement && draggingElement.dragType && draggingElement.dragType == "element")
{
if(draggingElement !=null && enableOpacity)
{
draggingElement.style.filter = "Alpha(opacity=30)";
}
var left = parseInt(draggingElement.style.left.replace("px",""));
var top = parseInt(draggingElement.style.top.replace("px",""));
draggingElement.style.left = left + event.x - oldLeft;
draggingElement.style.top = top + event.y - oldTop;
oldLeft = event.x;
oldTop = event.y;
}
}
function doContainerMouseUp()
{
if(draggingElement !=null && enableOpacity)
{
draggingElement.style.filter = "Alpha(opacity=100)";
}
draggingElement = null;
}
<script language="JavaScript1.2">
//-- 控制层删除start of script -->
function ssdel(){
if (event)
{
lObj = event.srcElement ;
while (lObj && lObj.tagName != "DIV") lObj = lObj.parentElement ;
}
var id=lObj.id
document.getElementById(id).removeNode(true);
//document.getElementById(id).outerHTML="";//这样也可以;
}
//-- 控制层删除End of script -->
</script>
<script>
//-- 控制层移动start of script -->
var Obj=''
var index=10000;//z-index;
document.onmouseup=MUp
document.onmousemove=MMove
function MDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}
function MMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
document.all("lblX").innerText = event.y-pX;
document.all("lblY").innerText= event.y-pY;
}
}
function MUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}
//-- 控制层移动end of script -->
//获得焦点;
function getFocus(obj)
{
if(obj.style.zIndex!=index)
{
index = index + 2;
var idx = index;
obj.style.zIndex=idx;
//obj.nextSibling.style.zIndex=idx-1;
}
}
</script>
<div id='cc1' class='Cccc' style='position:absolute;left:100px;top:200px;;FILTER: alpha(opacity=80);z-index:-1;' onmousedown='getFocus(this)'>
<table border=0><td style='cursor:move;' width='95%' onmousedown=MDown(cc1)>111111111</td><td style='cursor:hand;' onclick='ssdel()' width='5%'>×</td></tr><tr><td style='height:150px;padding:5px;' colspan='2'>
<div style='padding:5px;float:right;'>111</div></td></tr></table>
</div>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。