文件拖动封装

文件拖动封装

// 拖动封装
(function () {
    var domList = document.querySelectorAll("[drag-move]");
    function domMouseMove(event) {
        event = event || window.event;
        var cssObj = window.getComputedStyle(this);

        this.style.left = parseFloat(cssObj.left) + event.clientX - this.dataset.startX + "px";
        this.style.top = parseFloat(cssObj.top) + event.clientY - this.dataset.startY + "px";

        //上面的坐标已经赋值完成后
        this.dataset.startX = event.clientX;
        this.dataset.startY = event.clientY;
    }
    domList.forEach(function (item) {
        item.addEventListener("mousedown", function (event) {
            event = event || window.event;
            if (event.button == 0) {
                //先记录鼠标的clientX与clientY
                this.dataset.startX = event.clientX;
                this.dataset.startY = event.clientY;
                this.addEventListener("mousemove", domMouseMove);
            }
        });

        item.addEventListener("mouseup", function (event) {
            this.removeEventListener("mousemove", domMouseMove);
        });

        item.addEventListener("mouseleave", function (event) {
            this.removeEventListener("mousemove", domMouseMove);
        })
    });
})();
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页