纯js实现DIV拖拽

Posted 2020-07-11

写代码的时候遇到需要对绝对布局的div进行拖拽的功能，起初为了省事直接在网上扒拉了一番，看到大神张鑫旭的一篇文章《JavaScript实现最简单的拖拽效果》，便直接拿来使用（膜拜大神）。但发现这段代码使用前必须设置top和left样式属性，否则拖动时div会有跳动，而且不支持多个div的拖动。于是对代码大概修改了一番，贴在这里，以备后用，希望大神勿怪。

var startDrag = function(bar, target, callback) {
    (function(bar, target, callback) {
        var params = {
            left: 0,
            top: 0,
            currentX: 0,
            currentY: 0,
            flag: false
        };
        bar.onmousedown = function(e){
            params.flag = true;
            params.left = target.offsetLeft;
            params.top = target.offsetTop;
            if(!e){
                e = window.event;
                bar.onselectstart = function(){
                    return false;
                }
            }
            params.currentX = e.clientX;
            params.currentY = e.clientY;
        };
        bar.onmouseup = function(){
            params.flag = false;
        };
        bar.onmousemove = function(e){
            var evt = e ? e: window.event;
            if(params.flag){
                var nowX = evt.clientX, nowY = evt.clientY;
                var disX = nowX - params.currentX, disY = nowY - params.currentY;
                target.style.left = parseInt(params.left) + disX + "px";
                target.style.top = parseInt(params.top) + disY + "px";
            }

            if (typeof callback == "function") {
                callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
            }
        }
    })(bar, target, callback);
};

上边的方法主要接受两个参数：第一个是点击的对象（即点击那里可以实现拖拽，例如弹出层的标题栏），第二个是拖拽的对象（例如一个弹出层）。也就是startDrag(触发拖拽对象，被拖拽对象)。详细使用方法猛戳上边链接查看。