dragimage.js

一些Acjax的控件简单应用学习实例

//--------------------------------------------------------------
//2008-06-03 Deng Guoqi   
//--------------------------------------------------------------

function fixE(e){var e;e=e?e:(window.event?window.event:null);return e}
function fixElement(e){var e;return e.target?(e.target.nodeType==3?e.target.parentNode:e.target):e.srcElement;}


IE=true;

var Drag={
    draging : false,//使能拖动
    x : 0,
    y : 0,
    ox: 0,
    oy: 0,
    divx : 0,
    divy : 0,
    element : null,
    fDiv : null,
    draged : false,//是否已被拖动
    doDraging : false,//启动拖动功能
    objmove:null,//拖动的元素（房屋、门牌等）
    //使能拖动事件
    addEvent : function(obj)
    {
        Drag.objmove = obj;
        if( Drag.objmove.id )
        {
            Drag.fDiv = document.getElementById(Drag.objmove.id);
            Drag.fDiv.onmousedown=Drag.dragStart;
        }
        Drag.draged = false;//准备拖动，但还未拖动
    },
    
    //撤消拖动
    CancelEvent : function(obj)
    {
        Drag.objmove = null;
        if( Drag.fDiv )
        {
            Drag.fDiv.onmousedown=null;
        }
        Drag.fDiv = null;
        Drag.doDraging = false;
        Drag.draging = false;
        Drag.draged = false;        
    },
    
    //开始拖动
    dragStart : function (e)
    {
       if(Drag.draging)return;
       e = fixE(e);
       if(e)element = fixElement(e);

       Drag.x = event.clientX;
       Drag.y = event.clientY;
       
       Drag.ox = e.offsetX;
       Drag.oy = e.offsetY; 
       Drag.divx = Util.getValueOfNoPX(Drag.fDiv.style.left);     
       Drag.divy = Util.getValueOfNoPX(Drag.fDiv.style.top);
       
       document.body.style.cursor="move";
       document.onmousemove=Drag.drag;
       document.ondragstart=function(){window.event.returnValue = false;};
       document.onselectstart=function(){window.event.returnValue = false;};
       document.onselect=function(){return false};
       document.onmouseup=element.onmouseup=Drag.dragEnd;
       element.onmousedown=null;
    },
    //拖动
    drag : function (e)
    {
       e=fixE(e);
       var x=event.clientX,y=event.clientY;
       var xx = x - Drag.x;
       var yy = y - Drag.y;
       Drag.fDiv.style.top = Drag.divy + yy + "px";
       Drag.fDiv.style.left = Drag.divx + xx + "px";
       if( Drag.objmove.titleDiv )
       {
            Drag.objmove.titleDiv.style.left = Drag.divx + xx - Drag.objmove.wid/2 - 10;
            Drag.objmove.titleDiv.style.top = Drag.divy + yy - Drag.objmove.hig/2 - 20;
       }
       Drag.draged = true;//已经拖动
    },
    //结束拖动操作
    dragEnd : function (e)
    {
//       document.body.style.cursor="";
       document.ondragstart=document.onmousemove=document.onselectstart=document.onselect=document.onmouseup=null;
       if( Drag.fDiv!=null )
       {
            Drag.fDiv.onmousedown = null;
       };
       Drag.draging=false;
       Drag.doDraging = false;
       if( Drag.objmove )
       {
           if( Drag.objmove.stop_move )
           {
                Drag.objmove.stop_move();
           }
           Drag.objmove = null;
       }
    }

}