使用JS实现拖动

学习了一下用JavaScript实现拖动效果，找来网上的代码分析了一下然后照抄了个最简单的，将慢慢将它完善 现状：目前还不支持FireFox 不支持项（已知项）：pixelLeft、pixelTop、alpha(opacity=90)

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN " >
< HTML >
< HEAD >
< TITLE >  New Document  </ TITLE >
< META NAME = " Generator "  CONTENT = " EditPlus " >
< META NAME = " Author "  CONTENT = "" >
< META NAME = " Keywords "  CONTENT = "" >
< META NAME = " Description "  CONTENT = "" >
< 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 >
< script language = " JavaScript "  type = " text/javascript " >
/**/ /** 目标面板 */
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 >
< div id = " div_one "  class = " div_one "  style = " position:absolute; left:116px; top:137px; width:433px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; " >
     < div onMouseDown = " readyDrag(event) "  style = " cursor:move; border:1px solid #996666; background-color:#996666; height:20px "  name = " dragDIV "  class = " dragBar " >
        Window
     </ div >
     < div class = " textSheet "  style = " border:1px solid #996666; " > Content < br ></ div >
</ div >
</ BODY >
</ HTML >