[转]鼠标拖动层的javascript脚本

Posted on 2007-09-13 10:45 逍遥游阅读(880) 评论(1) 收藏举报

方法一：
代码的基本思想是：把要拖动的控件（可以是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日

示例：

<tr>

<td colspan="3">标题1

</td>

</tr>

<tr>

<td>aa:

</td>

<td>

</td>

<td>label1

</td>

</tr>

<tr>

<td>bb:

</td>

<td>

</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;

}

方法二：

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;
}
}

刷新页面返回顶部

逍遥游

公告

[转]鼠标拖动层的javascript脚本