Div的drag-drop实践结果【原创】

最新推荐文章于 2023-05-11 17:12:00 发布

weixin_30305735

最新推荐文章于 2023-05-11 17:12:00 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zxub/archive/2006/06/28/438152.html

版权

　　看了那些个框架里关于拖曳方面的例子，一看代码，昏倒，乱得很，有的又只支持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 ="width:200px;height:50px;border:1px solid black" > 1 </ div >
< div id ="t2" style ="width:200px;height:100px;border:1px solid black" > 2 </ div >
< div id ="t3" style ="width:500px;height:300px;border:1px solid black;padding:5 5 5 5" >
     < div id ="t5" style ="width:200px;height:50px;border:1px solid black" > 5 </ div >
     < div id ="t6" style ="width:200px;height:50px;border:1px solid black" > 6 </ div >
</ div >
< div id ="t4" style ="width: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

转载于:https://www.cnblogs.com/zxub/archive/2006/06/28/438152.html

weixin_30305735

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Div的drag-drop实践结果【原创】

　　看了那些个框架里关于拖曳方面的例子，一看代码，昏倒，乱得很，有的又只支持IE，ff下根本没用，郁闷之下，决定自己写一个。　　为了在ff下能用，花了点时间，代码如下：　　event.js：/***事件处理类*@authorzxub2006-06-21*/varEvent=newfunction(){this.element=function(_event){...
复制链接

扫一扫