Div的dragdrop实践结果【原创】

　　看了那些个框架里关于拖曳方面的例子，一看代码，昏倒，乱得很，有的又只支持IE，ff下根本没用，郁闷之下，决定自己写一个。
　　为了在ff下能用，花了点时间，代码如下：
　　event.js：

/**
* 事件处理类
* @author zxub 2006-06-21
*/
var Event=new function()
{
    this.element=function(_event)
    {
        return _event.target || _event.srcElement;
    }

    this.pointerX=function(_event)
    {
        return _event.pageX || (_event.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft));
    }

    this.pointerY=function(_event)
    {
        return _event.pageY || (_event.clientY+(document.documentElement.scrollTop || document.body.scrollTop));
    }

    this.isLeftClick=function(_event)
    {
        return (((_event.which) && (_event.which==1)) || ((_event.button) && (_event.button==1)));
    }

    this.observers=null;

    this.alreadyObserve=function(element,name,observer,useCapture)
    {
        for (var i=0; i<Event.observers.length; i++)
        {
            if (Event.observers[i][0]==element && Event.observers[i][1]==name && Event.observers[i][2]==observer)
            {
                return true;
            }
        }
        return false;
    }

    this.unReg=function(element,name,observer,useCapture)
    {
        for (var i=0; i<Event.observers.length; i++)
        {
            if (Event.observers[i][0]==element && Event.observers[i][1]==name && Event.observers[i][2]==observer)
            {
                Event.observers[i][0]=null;
                Event.observers.splice(i,1);
                break;
            }
        }
    }

    /**
     * 防止事件传播，进行中止
     */
    this.stopEvent=function(_event)
    {
        if (_event.preventDefault)
        {
            _event.preventDefault();
            _event.stopPropagation();
        }
        else
        {
            _event.returnValue = false;
            _event.cancelBubble = true;
        }
    }


    /**
     * 增加事件处理
     * 注意，对于同一个Element,IE和Firefox的处理顺序是相反的，IE用栈的形式，后注册的先执行，而Firefox用队列的形式，先注册先执行
     * 至于useCapture，是当element存在包含关系，事件的处理顺序
     * 处理顺序有2种，capturing和bubbling
     * capturing是从外向内，而bubbling是从内向外
     * IE只支持bubbling，所有useCapture是没有意义的
     * Firefox中，2种都支持，useCapture为false的时候为bubbling，true为capturing，推荐用bubbling
     * 默认useCapture为false
     */
    this.observe=function(element, name, observer, useCapture)
    {
        if (typeof(element)=="string")
        {
            element=document.getElementById(element);
        }
        useCapture = useCapture || false;
        if (this.observers==null)
        {
            this.observers=new Array();
        }
        //检查是否注册了同样的事件处理
        if (Event.alreadyObserve(element, name, observer, useCapture)) return;
        if (element.addEventListener) //firefox
        {
            element.addEventListener(name, observer, useCapture);
        }
        else if (element.attachEvent) //IE
        {
            element.attachEvent("on"+name, observer);
        }
        this.observers.push([element, name, observer, useCapture]);
    }

    this.stopObserving=function(element, name, observer, useCapture)
    {
        if (typeof(element)=="string")
        {
            element=document.getElementById(element);
        }
        useCapture = useCapture || false;

        if (element.removeEventListener)
        {
            element.removeEventListener(name, observer, useCapture);
        }
        else if (element.detachEvent)
        {
            element.detachEvent("on"+name, observer);
        }
        Event.unReg(element, name, observer, useCapture);
    }

    this.clearObservers=function()
    {
        if (Event.observers==null) return;
        for (var i=0;i<Event.observers.length; i++)
        {
            Event.stopObserving.apply(this, Event.observers[i]);
            Event.observers[i][0] = null;//释放对element的引用
        }
        Event.observers = null;
    }
}

if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
    Event.observe(window,'onunload',Event.clearObservers,false);
}

　　position.js：

　　drag.js：

　　测试页面：

<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>
</head>
<body>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="position.js"></script>
<script type="text/javascript" src="drag.js"></script>
<div id="t1" style="200px;height:50px;border:1px solid black">1</div>
<div id="t2" style="200px;height:100px;border:1px solid black">2</div>
<div id="t3" style="500px;height:300px;border:1px solid black;padding:5 5 5 5">
    <div id="t5" style="200px;height:50px;border:1px solid black">5</div>
    <div id="t6" style="200px;height:50px;border:1px solid black">6</div>
</div>
<div id="t4" style="500px;height:200px;border:1px solid black;padding:5 5 5 5"></div>
<div id="info"></div>
<script type="text/javascript">
Drag.addSource("t1","t2","t5","t6");
Drag.addTarget("t3","t4");
</script>
</body>
</html>

　　关于位置保存，以后再加上来。
　　源码下载： drag.rar

相关阅读:
软件推荐Q10 CircleDock PHP
Google Chrome浏览器扩展程序推荐 PHP
jsColor取色器 PHP
在线指法练习【怀旧版】 PHP
model工厂类(转)
表变量与临时表的优缺点
项目的阶段性目标管理
如何配置不启用安全的WCF服务
团队高效执行力从何而来
socket connect函数本质含义

原文地址：https://www.cnblogs.com/zxub/p/438152.html