纯js实现左右拖动父元素，可以滚动子元素，有惯性效果，复制代码即可使用，拿来即用

本文链接：https://blog.youkuaiyun.com/mengzhanfei1/article/details/122218043

该博客内容展示了如何使用JavaScript实现一个元素的拖动功能，并在鼠标释放后产生平滑滚动效果。通过设置CSS样式、遍历元素并插入HTML、监听鼠标事件，实现了对div元素的拖动和平滑滚动的交互体验。代码中包含事件处理、计时器应用以及鼠标坐标计算等关键技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<style>
    #tag{
        background: #eee;
        cursor: move;
        display: flex;overflow: hidden;
    }
    #tag div{
        border: 20px solid #fff;
        background: #dddddd;
        width: 33.33%;
        height: 200px;
        flex: none;

    }
</style>
<div id="tag"></div>

<script>
    var html=""
    var tag=document.getElementById('tag');
    for(var i=0;i<100;i++){
        html+="<div>"+i+"</div>";
        // $("#tag").append("<div>"+i+"</div>");
    }
    tag.innerHTML=html;
    
    window.onload = function(){
        var timer=null;//定时器
        var movex=0;//左右移动距离
        var num=0;//onmousemove次数
        var drag = document.getElementById('tag');
        // //点击某物体时，用drag对象即可，onmousemove和onmouseup是全局区域，
        // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
        drag.onselectstart= function () {
            return false;
        }
        drag.ondragstart = function () {
            return false
        }
        drag.onmousedown = function(event){
            clearInterval(timer)
            var event = event || window.event;  //兼容IE浏览器
            var x=event.clientX;
            document.onmousemove = function(event){

                var event = event || window.event;
                movex= event.clientX-x;
                console.log(num++,movex);
                drag.scrollLeft+=movex
            }
            document.onmouseup = function(event){
                this.onmousemove = null;
                this.onmouseup = null;
                // return
                timer=setInterval(function () {
                    movex=movex/1.1;
                    // console.log(timer);
                    // console.log(movex);
                    if(Math.abs(movex)<2){
                        clearInterval(timer)
                    }
                    drag.scrollLeft+=movex

                },25)

                //修复低版本ie bug
                if(typeof drag.releaseCapture!='undefined'){
                    drag.releaseCapture();
                }
            }
        }
    }
</script>