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

使用时只需绑定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

>

预览：

下载：