net生活
博客园 首页 新随笔 联系 订阅 管理
  30 Posts :: 0 Stories :: 496 Comments :: 26 Trackbacks
客户端拖动控件封装（让拖动变得更简单）

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

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

posted on 2006-05-19 14:20 Kevin Zou 阅读(1904) 评论(8)  编辑 收藏 网摘 所属分类: DHTML & Javascript

Feedback

#1楼 2006-05-19 14:53 一帆(老鼠粮仓之路)      
必须为绝对定位？
请看看99收藏夹
http://www.99scj.com">http://www.99scj.com
看里面的拖动怎么样？
跨浏览器的
  回复  引用  查看    

#2楼[楼主] 2006-05-19 15:00 小生      
去看看...

因为是做企业开发，我们的用户固定在IE平台上，所以只是简单地开发了一些ie平台上的控件：）


  回复  引用  查看    

#3楼 2006-05-20 02:07 ξσ Dicky σξ      
nb啊
  回复  引用  查看    

#4楼 2006-05-20 13:09 风之翼      
不错，有没有办法实现象MSN Space那样的啊？
  回复  引用  查看    

#5楼 2006-07-03 14:32 nb[未注册用户]
nb
  回复  引用    

#6楼 2006-09-25 17:44 sb[未注册用户]
vs2005出来要你写那么麻烦？
  回复  引用    

#7楼 2006-12-27 22:24 U2U      
发现楼主的htc能力很好，很多东西用htc包装显得很有趣
  回复  引用  查看    

#8楼 2007-03-19 13:01 zyhomepage[未注册用户]
非常不错！
  回复  引用    




发表评论

昵称： [登录] [注册]

主页：

邮箱：(仅博主可见)

评论内容：

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 404333




相关文章:

相关链接: