登陆 注册

用js写一个可以随意移动html元素的函数

守望者 2020-03-30 308人围观 ,发现0个评论 javascript

      用 js (javascript)写一个可以随意移动html元素(比如图片元素)的函数,我们可以通过鼠标拖拽移动一个图片元素

或者其他任意一个html元素,当然,这里给出限定条件,在父包含框范围内进行移动。


图片元素鼠标拖拽移动效果图:

QQ截图20200330111733.jpg


这个js函数的调用很简单,首先获得我们想要移动的dom节点或者html元素,然后调用random_move()函数即可:


 var a = document.getElementById("i");  //获取想要随意移动的dom节点
 random_move(a);               // 调用该js函数并传入dom节点


这里测试用的html,css代码和js函数代码最下面已给出,其中html,css测试代码比较简单,不再讲解,下面重点讲一下js代码部分


js函数解析:


先讲一下四个全局变量:


ori_left:  移动节点a在父包含框内的相对位置中的x坐标。

ori_top:  移动节点a在父包含框内的相对位置中的y坐标。

page_x: 鼠标在整个页面的x坐标。

page_y: 鼠标在整个页面的y坐标


     var ori_left = 0;
     var ori_top = 0;
     var page_x = 0;
     var page_y = 0;


random_move()函数是入口函数:


鼠标按下操作节点时调用mousedown()函数,

鼠标抬起操作节点时移除监听mousemove()函数,

鼠标移出操作节点时移除监听mousemove()函数。


 function random_move(a){
           
             a.onmousedown = function(){mousedown(event,a);};                    
             a.onmouseup = function(){a.removeEventListener("mousemove",mousemove,true);}
             a.onmouseout = function(){ a.removeEventListener("mousemove",mousemove,true);}
                
             }


mousedown()函数:

首先,去除部分浏览器含有的默认监听事件,否则random_move()函数功能会失效,

         e.preventDefault();


然后记录好四个全局变量,

       page_x = e.pageX;
       page_y = e.pageY;
       ori_left = a.offsetLeft;
       ori_top  = a.offsetTop;


并且监听mousemove动作,执行mousemove()函数:

a.addEventListener("mousemove",mousemove,true);


mousemove()函数:

获取传进来的操作节点a:

var a = e.target;


分别计算鼠标移动过程中操作节点a所应当放置的相对于父包含框的x,y坐标:

 var x = e.pageX-page_x+ori_left;
 var y = e.pageY-page_y+ori_top;


对所计算得到的x,y坐标进行检查是否对父包含框越界:

如果向左越界则x赋值0:

 x = x<=0?0:x;


如果向右越界则x赋值为父包含框内的最大值:

 x = x+a.offsetWidth>=a.parentElement.offsetWidth?a.parentElement.offsetWidth-a.offsetWidth:x;


如果向上越界则对y赋值0:

 y = y<=0?0:y;


如果向下越界则y赋值为父包含框内的最大值:

 y = y+a.offsetHeight>=a.parentElement.offsetHeight?a.parentElement.offsetHeight-a.offsetHeight:y;


对操作节点a的x,y坐标进行更新(绝对定位):

  a.style.left = x+"px";
  a.style.top = y+"px";


test.html测试文件代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

    <style>
    
        body{
            margin: 0;
            padding: 0;

        }
        
        div.outer{
           
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }

        
        img{

            width: 250px;
            height: 150px;
            
            position: absolute;
        }
    </style>
    
    <script type="text/javascript" src="randomMove.js"></script>
    
    <script>
   
       window.onload = function(){
           
           var a = document.getElementById("i");
           random_move(a);
           
           
       }
    </script>
    
    </head>
    
    <body>
       <div class="outer">
         <img id="i" src="a.jpg">
        </div>
    </body>
    
</html>



randomMove.js文件代码:

        var ori_left = 0;
        var ori_top = 0;
        var page_x = 0;
        var page_y = 0;
        
       function random_move(a){
           
                a.onmousedown = function(){mousedown(event,a);};                    
                a.onmouseup = function(){a.removeEventListener("mousemove",mousemove,true);}
                a.onmouseout = function(){ a.removeEventListener("mousemove",mousemove,true);}
                
 
             }
        
          function mousedown(e,a){
                e.preventDefault();
                e.stopPropagation();
                
                page_x = e.pageX;
                page_y = e.pageY;
                ori_left = a.offsetLeft;
                ori_top  = a.offsetTop;
                
                a.addEventListener("mousemove",mousemove,true);
//                alert("mousedown "+a.id);
             }
          function mousemove(e){
                   
                e.preventDefault();
                e.stopPropagation();
                var a = e.target;
            
                   var x = e.pageX-page_x+ori_left;
                   var y = e.pageY-page_y+ori_top;
              
              // 限定a元素在父方框内
               x = x<=0?0:x;
               x = x+a.offsetWidth>=a.parentElement.offsetWidth?a.parentElement.offsetWidth-a.offsetWidth:x;
               y = y<=0?0:y;
               y = y+a.offsetHeight>=a.parentElement.offsetHeight?a.parentElement.offsetHeight-a.offsetHeight:y;
              
                a.style.left = x+"px";
                a.style.top = y+"px";
            
//               alert("mousemove "+a.id);
        }


   转载请注明本文链接:https://tufeng.xyz/javascript/34.html,谢谢合作!

请发表您的评论
请关注微信公众号
微信二维码