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

稿源：互联网 2022-04-02 21:40:19 点击： 4594 撤稿纠错

设置了一个边界范围，并在该范围内拖动可以拖动的网页特效代码，用者收藏！

以下讨论的是和拖动相关的js制作一个在特定范围内可拖动的层教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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制作一个在特定范围内可拖动的层的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011022467845.shtml方便下次再访问哦。

·上一篇： 自动隐藏选项卡内容的选项卡js特效
·下一篇： 一个JS高手在IE9开发大赛上写的JS特效参赛作品

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

文章分类LIST >>返回首页

最新游戏

最新新闻