使用JS实现拖动

来源：互联网发布：淘宝tiffany代购编辑：程序博客网时间：2024/04/29 16:48

学习了一下用JavaScript实现拖动效果，找来网上的代码分析了一下然后照抄了个最简单的，将慢慢将它完善

现状：目前还不支持FireFox

不支持项（已知项）：pixelLeft、pixelTop、alpha(opacity=90)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<style>

*{font-size:12px}

.dragTable{

font-size:12px;

border-top:1px solid #3366cc;

margin-bottom: 10px;

width:100%;

background-color:#FFFFFF;

}

.dragTR{

cursor:move;

color:#7787cc;

background-color:#e5eef9;

}

td{vertical-align:top;}

#parentTable{

border-collapse:collapse;

letter-spacing:25px;

}

</style>

/** 目标面板 */

var tarElement=null;

/** 实际被拖动面板 */

var dragElement=null;

/** 定义元素位置 */

var downX,downY,tmp_o_x,tmp_o_y;

var refElement=null;

var dragActive=0;

/** 是否在移动中 1为是 */

var draging=0;

function getEventElement (event){

if(event == null){

event = window.event;

}

return (event.srcElement ? event.srcElement : event.target);

}

/**

* onMouseDown触发事件

function readyDrag(event) {

dragActive = 1;

var eventObj = getEventElement(event);

// 非DIV元素不能被拖动

if(eventObj.tagName != "DIV") return;

// 将目标元素附给dragElement

dragElement = eventObj.parentNode;

// 复制一个tmpElement到目标面板

tarElement = dragElement.cloneNode(true);

// TODO alpha(opacity=50)仅被IE支持

tarElement.style.filter="alpha(opacity=50)"

tarElement.style.zIndex=2;

dragElement.style.zIndxe=1;

tarElement.style.position="absolute";

if(dragElement.parentNode.tagName != "BODY"){

// 当选中可拖动元素时,初始化拖动元素的初始位置

// TODO pixelLeft仅被IE支持

dragElement.style.left = dragElement.offsetLeft + dragElement.parentNode.style.pixelLeft;

dragElement.style.top = dragElement.offsetTop + dragElement.parentNode.style.pixelTop;

}

//取得当前鼠标的绝对位置

downX=event.clientX;

downY=event.clientY;

//取得拖动元素当前的绝对位置

tmp_o_x=dragElement.style.pixelLeft;

tmp_o_y=dragElement.style.pixelTop;

tarElement.style.visibility="hidden";

document.body.appendChild(tarElement);

document.onmousemove=startDrag;

}

document.onmouseup=endDrag;

/**

* onMouseOver事件触发

function startDrag(){

if(dragActive==1&&event.button==1&&dragElement!=null&&tarElement!=null){

//当拖动动作进行、mouse button pressed、拖动物件存在、目标面板存在的情况下

tarElement.style.visibility="visible";

tarElement.style.left=tmp_o_x+event.clientX-downX;

tarElement.style.top=tmp_o_y+event.clientY-downY;

dragElement.style.backgroundColor="#CCCCCC";

//游标样式

document.body.style.cursor="move";

draging=1;

}

/**

* onMouseUp时间触发

function endDrag(){

if(dragActive==1&&tarElement!=null){

//当拖动动作进行、目标面板存在的情况下

if(draging==1){

// 如果面板处于移动状态中，将原有面板移除

dragElement.removeNode(true);

draging=0;

}

tarElement.style.filter="alpha(opacity=100)";

tarElement.style.zIndex=1;

document.body.style.cursor="default";

}

dragElement=null;

tarElement=null;

dragActive=0;

}

</script>

</HEAD>

<BODY>

Window

</div>

<div class="textSheet" style="border:1px solid #996666;">Content<br></div>

</div>

</BODY>

</HTML>