Как добраться до фактического развития переднего плана: реализация перетаскивания эффекта DIV

Реализация идей:

1. Начало перетаскивания мышью вниз
2. положение мыши и нажмите элемент записи позиции мыши
3. Перетащите записку мыши в текущей позиции мыши
4. Текущее положение мышей - нажать кнопку мыши, когда расстояние мыши движения положения =
5. Элемент положение = положение + движение мыши элементы расстояния при нажатии мыши

Код:

class Drag {
    //构造函数
    constructor(el) {
        this.el = el;
        //鼠标摁下时的元素位置
        this.startOffset = {};
        //鼠标摁下时的鼠标位置
        this.startPoint = {};
        let move = (e) => {
            this.move(e);
        };
        let end = (e) => {
            document.removeEventListener("mousemove", move);
            document.removeEventListener("mouseup", end);
        };
        el.addEventListener("mousedown", (e) => {
            this.start(e);
            document.addEventListener("mousemove", move);
            document.addEventListener("mouseup", end);
        })
    }
    //摁下时的处理函数
    start(e) {
        let { el } = this;
        this.startOffset = {
            x: el.offsetLeft,
            y: el.offsetTop
        }
        this.startPoint = {
            x: e.clientX,
            y: e.clientY
        }
    }
    //鼠标移动时的处理函数
    move(e) {
        let { el, startOffset, startPoint } = this;
        let newPoint = {
            x: e.clientX,
            y: e.clientY
        }
        let dis = {
            x: newPoint.x - startPoint.x,
            y: newPoint.y - startPoint.y,
        }
        el.style.left = dis.x + startOffset.x + "px";
        el.style.top = dis.y + startOffset.y + "px";
    }
}

(function () {
    let box = document.querySelector("#box");
    let dragbox = new Drag(box);
})()

Узнает будет путаница, отсутствие мотивации. Вот что я рекомендую фронтальный обмен обучения группы: 731 771 211, который передний конец исследования, если вы хотите создать веб-странице охладиться, хочу научиться программированию. Сам составил передний конец 2019 наиболее всеобъемлющие учебные материалы, от самого простого HTML + CSS + JS [прохладно спецэффекты, игры, плагин пакет шаблонов проектирования], чтобы перейти к концу проекта HTML5 реальных учебные материалы отделки, дали каждый передний конец младший партнер, хотел научиться веб-передний конец, или сменить место работы, или студент колледжа, а также работу требуется обновить свои навыки, может присоединиться к младшему партнеру, чтобы научиться учиться.

Нажмите: присоединиться