JS拖拽图片

分享一个简单的图片拖拽效果

HTML结构

用一个div包裹图片

    <div class="box">
        <img src="./images/img.jpg" alt="">
    </div>

CSS样式

盒子加上溢出隐藏，这里做的效果是Y轴滚动，所以让width:100%高度自适应

    <style>
        .box {
            position: relative;
            width: 888px;
            height: 300px;
            margin: 100px auto;
            overflow: hidden;
        }

        .box img {
            position: absolute;
            width: 100%;
        }
    </style>

JS

    <script>
        let box = document.querySelector('.box');
        let img = document.querySelector('img');
        let maxHeight = 0
        // 在图片加载完之后取得可移动最大高度
        img.onload = function () {
            maxHeight = img.clientHeight - box.clientHeight
        }
        img.onmousedown = function (event) {
            event = window.event || event;
            let imgY = event.pageY - this.offsetTop  // 鼠标在盒子中的位置
            document.onmousemove = function (e) {
                e = window.event || e;
                e.preventDefault() // 禁止默认行为
                let y = e.pageY - imgY // 算出Y轴移动距离
                y = y > 0 ? 0 : y // 限制最大最小值
                y = Math.abs(y) < maxHeight ? y : -maxHeight
                img.style.top = y + 'px'
                console.log(y);
            }
            document.onmouseup = function () {
                document.onmousemove = null
            }
        }
    </script>

效果如下