js制作一个在特定范围内可拖动的层-JS特效-爱易网页

js制作一个在特定范围内可拖动的层

日期：2014-05-18　浏览次数：20368 次

以下是程序代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>范围内拖动效果</title>
  <style>
   /* 绝对定位 */
   #dragger1{
    width:100px;
    height:100px;
    background:#bbb;
    position:absolute;
    left:0px;
    top:0px;
    cursor:move;
   }
   .border{
    border:1px solid #ccc;
    width:600px;
    height:600px;
    position:relative;
    margin:100px auto;
   }
  </style>
 </head>
 <body unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
 <div class="border" id="bor">
  <div id='dragger1'>可以在范围内拖动</div>
 </div>
  <script>
   var _$ = function(id){
    return document.getElementById(id);
   }
   function bindEvent(node,eventType,callback){
    if(node.attachEvent){
     if(eventType.indexOf('on')){eventType = 'on' + eventType}
     node.attachEvent(eventType,callback);
    }
    else{
     if(!eventType.indexOf('on')){
       eventType = eventType.substring(2,eventType.length)
      }
      node.addEventListener(eventType,callback,false);
    }
    return callback;
   }
   function removeEvent(node,eventType,callback){
    if(node.detachEvent){
     if(eventType.indexOf('on')){eventType = 'on' + eventType}
     node.detachEvent(eventType,callback);
    }
    else{
      if(!eventType.indexOf('on')){
       eventType = eventType.substring(2,eventType.length);
      }
      node.removeEventListener(eventType,callback,false);
    }
   }
   
   //创建接口
   function __drag__(dragger){
    var drag = bindEvent(dragger,'onmousedown',function(e){
    e = e || event;
    var mouseX = e.clientX || e.pageX;
    var mouseY = e.clientY || e.pageY;
    var objStyle = dragger.currentStyle || window.getComputedStyle(dragger,null);
    var objX = parseInt(objStyle.left) || 0;
    var objY = parseInt(objStyle.top) || 0;
    var limitX = mouseX - objX ;
    var limitY = mouseY - objY ;
    
    if(!dragger.onDrag){
     dragger.onDrag = bindEvent(document,'onmousemove',function(e){
      
      e = e || event;
      dragger.style.left = (e.clientX || e.pageX) - limitX + 'px';
      dragger.style.top = (e.clientY || e.pageY) - limitY + 'px';
      if(parseInt(dragger.style.left)<0){
                  dragger.style.left=0+"px";     
            }
            if(parseInt(dragger.style.left)>500){
                  dragger.style.left=500+"px";
            }
            if(parseInt(dragger.style.top)>500){
                  dragger.style.top=500+"px";                 
            }
            if(parseInt(dragger.style.top)<0){
                  dragger.style.top=0+"px";                    
            }      
     });
     dragger.onDragEnd = bindEvent(document,'onmouseup',function(){
    
      removeEvent(document,'onmousemove',dragger.onDrag);
      removeEvent(document,'onmouseup',dragger.onDragEnd);
      try{
       delete dragger.onDrag;
       delete dragger.onDragEnd;
      }catch(e){
       dragger.removeAttribute('onDrag');
       dragger.removeAttribute('onDragEnd');
      }
      
     })
    }
    })
   }
   
   __drag__(_$("dragger1"))();
  </script>
 </body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js制作一个在特定范围内可拖动的层

相关资料更多>

推荐阅读更多>