盒子的拖拽

Posted 2021-02-13 leslie-cheung1584304774

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒子的拖拽相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width:350px;
            height:350px;
            border:1px solid #000;
            margin:100px;
            position:relative;
        }
        #big{
            width:400px;
            height:400px;
            border:1px solid #000;
            position:absolute;
            top : 0;
            left : 360px;
            overflow:hidden;
            display:none;
        }
        #mask{
            width:175px;
            height:175px;
            background:pink;
            opacity:0.3;
            position:absolute;
            top:0;
            left:0;
            cursor:move;
            display:none
        }
        #small{
            position:relative;
        }
        #bigImg{
            position:absolute;
            left:0;
            top:0;
        }
    </style>
    <body>
        <div id="box">
            <div id="small">
                <img src="images/iphone.jpg" alt="" id="smallImg"/>
                <div id="mask"></div>
            </div>
            <div id="big">
                <img src="images/iphone_big.jpg" alt="" id="bigImg"/>
            </div>
        </div>
    </body>
</html>

<script>
    /*
     思路：
         1、鼠标移入到小图区域  显示mask和big   离开让big 和mask 隐藏
         2、鼠标在小图区域上移动  改变mask的left和top   控制bigImg的left和top
     */
    var small = document.getElementById("small");
    var big = document.getElementById("big");
    var bigImg = document.getElementById("bigImg");
    var smallImg = document.getElementById("smallImg");
    var mask = document.getElementById("mask");
    var box = document.getElementById("box");
    
    
    
    small.onmouseover = function(){
        big.style.display = "block";
        mask.style.display = "block";
    }
    
    small.onmouseout = function(){
        big.style.display = "none";
        mask.style.display = "none";
    }
    
    small.onmousemove = function(e){
        var e = e || event;
        //求 mask的left值   top值
        var x = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
        var y = e.pageY - box.offsetTop - mask.offsetHeight / 2;
        var maxL = small.offsetWidth - mask.offsetWidth;  //mask 最大的left
        var maxT = small.offsetHeight - mask.offsetHeight; //mask 最大的top
        //边界处理
        x = x < 0 ? 0 : x > maxL ? maxL : x;
        y = y < 0 ? 0 : y > maxT ? maxT : y;
        
        //大图的left  
        bigImg.style.left = -x * (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth) + "px";
        bigImg.style.top = -y * (bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight) + "px";
        mask.style.left = x +　"px";
        mask.style.top = y + "px";
    
    }
    
    //如果你想改mask的尺寸  
    //大图宽度/小图宽度  =  大图可视区big宽度/小图可视区mask宽度
    //  800 / 350   =   400 / 175
     // 800 / 350   =   228 / 100
     // 2.28        =   2.28 
</script>

以上是关于盒子的拖拽的主要内容，如果未能解决你的问题，请参考以下文章

vuejs2.0使用Sortable.js实现的拖拽功能( 转)

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

js 实现简单的拖拽

Vue：制作一个通用的拖拽组件

H5中的拖拽文件上传