javascript在限定范围内移动

在网上找了一个改的,没有把限定范围的程序写成一个单独函数,实现的算法不是很好。

 

< html >
< head >
< script >
/*********************************************************
**
** FileName: Drag.js
** Function: 实现指定对象的拖动等功能
** Compatibility: IE4, IE5+, FireFox, etc.
** Description: Perfect!!! powered by truly.
**
*********************************************************
*/



// 事件注册,调用示例:_attachEvent(document, "mousemove", moveHandler);
function _attachEvent(obj, evt, func) {
  
if(obj.addEventListener) {
    obj.addEventListener(evt,func,
true);
  }
 else if(obj.attachEvent) {
    obj.attachEvent(
"on"+evt,func);
  }
 else {
    eval(
"var old"+func+"="+obj+".on"+evt+";");
    eval(obj
+".on"+evt+"="+func+";");
  }

}


// 事件注销,调用示例:_detachEvent(document, "mousemove", moveHandler);
function _detachEvent(obj, evt, func) {
  
if(obj.removeEventListener) //DOM事件模型
    obj.removeEventListener(evt,func,true);
  }
 else if(obj.detachEvent) //IE5+ 事件模型
    obj.detachEvent("on"+evt,func);
  }
 else //IE事件模型
    eval(obj+".on"+evt+"=old"+func+";");
  }

}




// 禁止默认行为,调用示例:_cancelDefault(event);
function _cancelDefault(e)
{
  
if(e.preventDefault) e.preventDefault(); //2级DOM
  else e.returnValue=false//IE
}


// 阻止事件冒泡, 调用示例:_cancelBubble(event);
function _cancelBubble(e)
{
  
if(e.stopPropagation) e.stopPropagation(); //2 级DOM
  else e.cancelBubble=true//IE
}

function gid(id)
{
  
return document.getElementById(id);
}

// 激发指定对象的拖动事件,使用空的shadow,速度更快。§ 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function DragByShadow(dragObj,event, direction, maxX, maxY)
{

  
var objShadow;
  
var parentOffsetLeft = 0, parentOffsetTop = 0;
  
var obj = dragObj;

  
// 先保存原来的尺寸,防止变形
  dragObj.style.width = dragObj.offsetWidth;
  dragObj.style.height 
= dragObj.offsetHeight;
//  gid('dbg').innerHTML = dragObj.offsetTop;
  // 处理父节点偏移量
  while(obj.parentNode && obj.parentNode.tagName != "BODY")
  
{
    parentOffsetLeft 
+= obj.parentNode.offsetLeft;
parentOffsetTop 
+= obj.parentNode.offsetTop;
    obj 
= obj.parentNode;
  }


  
if(!document.getElementById('shadow'))
  
{
    objShadow
=document.createElement("DIV");
    objShadow.id 
= 'shadow';
    objShadow.style.position
='absolute';
    objShadow.style.filter 
= 'alpha(opacity=30,style=0)';
    objShadow.style.backgroundColor 
= '#ccc';
    document.body.appendChild(objShadow);
  }

  
else
    objShadow
= document.getElementById('shadow');


  
// 将阴影层放置在本层下面以防止遮住按钮等东西
  objShadow.style.zIndex = dragObj.style.zIndex+1;
  objShadow.style.left 
= parentOffsetLeft + dragObj.offsetLeft + 'px';
  objShadow.style.top 
= parentOffsetTop + dragObj.offsetTop + 'px';

  objShadow.style.width 
= dragObj.offsetWidth + 'px';
  objShadow.style.height 
= dragObj.offsetHeight + 'px';


  dragStart(objShadow,event, direction, maxX, maxY);
  objShadow.style.display
='none';
  _attachEvent(document, 
'mouseup', dragEnd);


  _cancelBubble(event);


  
//下面禁止执行默认动作
  _cancelDefault(event);
  
function dragEnd()
  
{
    
if(!direction)
    
{
      
// 未指定方向时,随意拖动
      dragObj.style.left = objShadow.offsetLeft-parentOffsetLeft + 'px';
      dragObj.style.top 
= objShadow.offsetTop-parentOffsetTop + 'px';
            
//dragObj.style.left=(objShadow.offsetLeft-parentOffsetLeft<0)?'0':objShadow.offsetLeft-parentOffsetLeft + 'px';
            //dragObj.style.top=(objShadow.offsetTop-parentOffsetTop<0)?'0':objShadow.offsetTop-parentOffsetTop + 'px';
    }
 else if( direction == 1{
      
// 水平移动
      dragObj.style.left = objShadow.style.left;
    }
 else if( direction == 2{
      
// 垂直移动
      dragObj.style.top = objShadow.style.top;
    }



    
// 删除阴影层,防止缓存
    document.body.removeChild(objShadow);

    
// 注销事件
    _detachEvent(document, 'mouseup', dragEnd);

    
//不要再让事件进一步传播.
    _cancelBubble(event);
    
if(dragObj.layerid) //有蒙层的模块要改变蒙层的高度、宽度等。
      ChangeLayer(dragObj);
  }

}


// 激发指定对象的拖动事件,实时拖动。§ 参数分别为 拖动对象, event, 方向(1水平,2垂直,null任意), 最大X坐标, 最大Y坐标
function dragStart(dragObj,event, direction, maxX, maxY)
{
  
// 先保存原来的尺寸,防止变形
  dragObj.style.width = dragObj.offsetWidth;
  dragObj.style.height 
= dragObj.offsetHeight;

  pointX
=event.clientX-parseInt(dragObj.offsetLeft);
  pointY
=event.clientY-parseInt(dragObj.offsetTop);

  _attachEvent(document, 
"mousemove", moveHandler);
  _attachEvent(document, 
'mouseup', dragEnd);

  _cancelBubble(event);

  
//下面禁止执行默认动作
  _cancelDefault(event);

  
function moveHandler(e) {
    dragObj.style.display 
= '';
    
//把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
    if(!direction)
    
{
      
// 未指定方向时,随意拖动
      dragObj.style.left=(e.clientX-pointX);//+"px";
      dragObj.style.top=(e.clientY-pointY);//+"px";
    }
 else if( direction == 1{
      
// 水平移动
      dragObj.style.left=(e.clientX-pointX);//+"px";
    }
 else if( direction == 2{
      
// 垂直移动
      dragObj.style.top=(e.clientY-pointY);//+"px";
    }

    
//不要再让其他元素看到该事件.
    _cancelBubble(event);

  }

  
function dragEnd()
  
{
/***/
            
var obm=$('main');
            dragObj
=$('drag');
            obmx
=parseInt(obm.offsetLeft);
            obmw
=600;//parseInt(obm.style.width);
            obmy=parseInt(obm.offsetTop);
            obmh
=500;//parseInt(obm.style.height);
            
            dragObjx
=parseInt(dragObj.offsetLeft);dragObjw=parseInt(dragObj.offsetWidth);
            dragObjy
=parseInt(dragObj.offsetTop);dragObjh=parseInt(dragObj.offsetHeight);
            
            
//alert(obm.style.left+obm.style.width);
            //alert(obm.style.width);
            if(dragObjx+dragObjw>obmx+obmw)
            
{  
               
                dragObj.style.left
=obmx+obmw-dragObjw;//-dragObj.style.width; 
                //alert((dragObjx+dragObjw)+','+(obmx+obmw)+','+(obmx+obmw-dragObjw)+dragObj.style.left);
            }

            
else if(dragObjx<obmx)
            
{
                dragObj.style.left
=obmx;
            }

            
            
if(dragObjy+dragObjh>obmh+obmy)
            
{  
                dragObj.style.top
=obmh+obmy-dragObjh;//-dragObj.style.height;
                //alert(dragObj.style.top+dragObj.style.height+','+obm.style.height+obm.style.top);
            }

            
else if(dragObjy<obmy)
            
{
                dragObj.style.top
=obmy;
            }
 
            
//+obmx+obmw","+alert(dragObj.style.top+dragObj.style.height,obm.style.height+obm.style.top);
            //alert(dragObj.style.left+','+dragObj.style.top);
/***/
    
// 注销事件
    _detachEvent(document, 'mousemove', moveHandler);
    _detachEvent(document, 
'mouseup', dragEnd);

    
//不要再让事件进一步传播.
    _cancelBubble(event);
  }

}

function $(id){return document.getElementById(id);}

script >
head >
< body >< center >
< div  id ="main"  style ="width: 600px;
                height: 500px; border-color: #AFD781; background-color: #ffffff; border-style: double;
                border-width: 1px"
>
< DIV  id ="drag"  onselectstart ="return false"  onmousedown =dragStart(this,event)
ondragstart ="return false"
style
="CURSOR: move; POSITION: absolute;width:150px;height:150px;border:solid 1px red; " > drag me! DIV >
div >
center >
body >
html >

 

你可能感兴趣的:(javascript在限定范围内移动)