拖动管理组件

yunhaifeiwu

浏览: 163054 次
性别:
来自: 宁波

最近访客更多访客>>

testjiang3

weitd

抛出异常的爱

mumuhuiyuan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

UI封装之javascript

IE Firefox Google UI F#

说明：

    在作网页时，有时想允许用户拖动一个标签，此时用第三方UI组件库是个不错的注意。如果想自已写如何写呢？自已只想写一次，以后都可用，又如何做呢？

    下面中的源代码实现了这个想法。在firefox表现特好，在ie6下可以拖动,google的还没测试。

    下面的代码中，FDrag类是核心的代码。对外界来说，仅有一个add方法。如果用户想让哪个标签可以拖动，只需把该标签的id名通过add方法传进去即可。
    例：下面id为xxx,yyy的div标签可以拖动。

<<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<head>
<title> 拖动对象 Drag Object (兼容:IE、Firefox、 ... )</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<script language="javascript">

    function FDrag(){
        this.ie=document.all;
        this.nn6=document.getElementById&&!document.all;
        this.isdrag=false;
        this.x;
        this.y;
        this.oDragObj;
        this.nTX;
        this.nTY;
        this.list = new Array();
        this.listTarg=new Array();
        this.add=function (divID){
            this.list.push(divID);//var d=list.pop();
	        var d=document.getElementById(divID);
            this.listTarg.push(d);
            d.style.position="relative";
	        d.style.cursor="move";
			
			d.onmousedown=(function(v) {
				return function() {
					v.initDrag(v,arguments[0]);//  arguments装着鼠标事件
				};
			}) (this);
	
			d.onmouseup=(function(v) {
				return function() {
					v.isdrag=false;
				};
			}) (this);
			
			d.onmousemove=(function(v) {
				return function() {
					v.moveMouse(v,arguments[0]); //arguments装着鼠标事件
				};
			}) (this);

        }

        this.moveMouse=function (o,e) {
            if (o.isdrag) {
                o.oDragObj.style.top  =  (o.nn6 ? o.nTY + e.clientY - o.y : o.nTY + event.clientY - o.y)+"px";
                o.oDragObj.style.left  =  (o.nn6 ? o.nTX + e.clientX - o.x : o.nTX + event.clientX - o.x)+"px";
                return false;
            }
        }

        this.initDrag=function (o,e) {
            var oDragHandle =o.nn6 ? e.target : event.srcElement;
            var isExist=false;
            for (var i=0 ; i<this.list.length;i++){
                if (this.list[i]==oDragHandle.id){
                    isExist=true;
                    break;
                }
            }

            if(isExist){
                o.isdrag = true;
                o.oDragObj = oDragHandle;
                o.nTY = parseInt(o.oDragObj.style.top+0);
                o.y = o.nn6 ? e.clientY : event.clientY;
                o.nTX = parseInt(o.oDragObj.style.left+0);
                o.x = o.nn6 ? e.clientX : event.clientX;               
                return false;
            }
        }    

    }

</script>
</head>
<body>

<div id="xxx" style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;">xxx11
       <div id="zzz" style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;">zzz11</div>
</div>
<div id="yyy" style="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;"
       >yyy11</div>



<script language="javascript">
   var f=new FDrag ();
   f.add("xxx");
   f.add("yyy");
</script>
</body>
</html>

分享到：

js 书写较复杂的UI日记 | 用js书写的一个简单的tab组件

2008-11-29 17:16
浏览 1359
评论(2)
论坛回复 / 浏览 (2 / 2221)
分类:Web前端
查看更多

2 楼 yunhaifeiwu 2008-11-29

walkman 写道

.dragAble {position:relative;cursor:move;}

这个样式最好是在给标签启用拖动的时候动态写到其 style 上更好，这样使用的时候就可以不用考虑是否忘了给标签加上 class="dragAble", 封装得也更彻底

感谢walkman回复！你说的很有道理，已经更改！

1 楼 walkman 2008-11-29

.dragAble {position:relative;cursor:move;}

这个样式最好是在给标签启用拖动的时候动态写到其 style 上更好，这样使用的时候就可以不用考虑是否忘了给标签加上 class="dragAble", 封装得也更彻底

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论