客户端拖动控件封装（让拖动变得更简单）

在一些交互性强的前端页面中，经常用到物件拖动，因此封装了一下拖动控件的代码。

使用时只需绑定htc拖动控件，然后设定一些可拖动控件(其position需设为absolute)的canMove属性(为1表示可以拖动)，layernum属性（拖动时，移动哪一个父元件）

<!--
Author:        Kw.Tsou
Date:        2005/11/26
Content:    为页面上的元件提供自由移动的功能
UseMark:    在body(或其它容器)上behavior此物件，然后在需要移动的物件上设置canMove = "1" ,如果不是移动本身，则可以设置layernum指向其父元素.(注意：该移动的物件的position必须为absolute)
-->
< PUBLIC:COMPONENT >
     < PUBLIC:ATTACH  EVENT ="onmousedown"  ONEVENT ="move_eDown()"   />
     < PUBLIC:ATTACH  EVENT ="onmouseup"  ONEVENT ="move_eUp()"   />
     < PUBLIC:ATTACH  EVENT ="onmousemove"  ONEVENT ="move_eMove()"   />
     < PUBLIC:EVENT  ID ="moveevent"   NAME ="ontagmove" />
</ PUBLIC:COMPONENT >
< SCRIPT  Language ="JavaScript" >
    var current = null;
    var offsetX = 0;
    var offsetY = 0;
    var dragging = false;
    var startedDragging = false;
    var ismove = false;
    
    function setCurrent(w)
    {
        current = w;
        if(current.style.position!="absolute"){
            alert("可移动物件的position必须为absolute,才可更好地移动");
            return;
        }
        var ex = event.clientX;
        var ey = event.clientY;
        offsetX = event.x - current.offsetLeft;
        offsetY = event.y - current.offsetTop;
        dragging = true;
        ismove = false;
    }

    function moveCurrent()
    {
        if (!dragging || !current)
            return;
            
        if (event.button == 0)
        {
            releaseCurrent();
            return;
        }
          
        if (!startedDragging)
        {
            startedDragging = true;
        }
          
        var ex = event.clientX;
        var ey = event.clientY;
        var newl = ex - offsetX;
        var newt = ey - offsetY
        if(newl!=current.style.pixelLeft||newt!=current.style.pixelTop){
            current.style.pixelLeft = ex - offsetX;
            current.style.pixelTop = ey - offsetY;
            ismove = true;
        }
        
        window.event.returnValue = false;
        window.event.cancelBubble = true;
        
    }

    function releaseCurrent()
    {
        current=null;
        dragging = false;
        startedDragging = false;
        window.event.returnValue = false;
        window.event.cancelBubble = true;
    }  

    //取得移动对象(如只能拖动标题栏进行移动)
    function getOpreateElement(el){
        //debug();
        var ret = el;
        var layernum = 0;
        if(el.layernum)
            layernum = parseInt(el.layernum);
        for(var i=0;i<layernum;i++)
        {
            ret = ret.parentElement;
        }
        return ret;

    }

    function move_eDown()
    {
        var e = window.event;
        var el = e.srcElement;
        if(el.canMove=="1"){
            el = getOpreateElement(el);
            if(!el.isLock){
                if(!(el.isResize=="1"&&el.runtimeStyle.cursor.indexOf("resize")>0))
                    setCurrent(el);
            }
        }
    }

    function move_eUp()
    {
        var tmp =null;
        if(current!=null)
            tmp = current;
        releaseCurrent();
        if(tmp!=null&&ismove){
            
            var evt = createEventObject();
            evt.src = tmp;
            try { moveevent.fire(evt); } catch(e) {};
        }
        ismove = false;
        tmp = null;
        
    }

    function move_eMove()
    {
        moveCurrent();
    }

</ SCRIPT >

< html >
< head >
< title > 什么都可以拖动 </ title >
< style >
body,div,td,font{}{font:menu;}
div,td{}{text-align:center}
</ style >
</ head >
< body  style ="margin:0px" >
< div  ontagmove ="window.status=' left:' + window.event.src.offsetLeft + ' top:' + window.event.src.offsetTop"  style ="margin:3px;position:absolute;overflow:hidden;behavior:url(BlogMoveAble.htc);border:1px solid gray;width:90%;height:90%;background-color:#efefef" >
     < div  canMove  = "1"  style ="background-color:gray;border:1px solid red;cursor:move;top:20px;left:20px;position:absolute;width:100px;height:100px;" >
        这是一个div
     </ div >
     < div   style ="background-color:#e1e1e1;border:1px solid blue;;top:120px;left:120px;position:absolute;width:180px;height:120px;" >
         < div  style ="height:30px;border:1px solid white;background-color:white;color:black;cursor:move"  canMove ="1"  layernum ="1" > 只有标题可以拖动 </ div >
        这是一个div
     </ div >
     < table  border ="1"  bordercolor ="green"  style ="width:50%;height:50%;position:absolute" >
         < tr >
             < td  canMove ="1"  layernum ="3"  colspan ="2"  style ="cursor:move;background-color:blue;color:white" > 这是表格的标题行 </ td >
         </ tr >
         < tr >
             < td > 1 </ td >
             < td > 2 </ td >
         </ tr >
         < tr >
             < td > 3 </ td >
             < td > 4 </ td >
         </ tr >
     </ table >
</ div >
</ body >
</ html >

预览：

testmove.htm

下载：
moveable.rar

http://tsoukw.cnblogs.com/archive/2006/05/19/404333.aspx