拖动管理组件

最新推荐文章于 2023-10-20 18:32:25 发布

yunhaifeiwu

最新推荐文章于 2023-10-20 18:32:25 发布

阅读量115

点赞数

分类专栏： UI封装之javascript 文章标签： IE Firefox Google UI F#

UI封装之javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

说明：

在作网页时，有时想允许用户拖动一个标签，此时用第三方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>