実際のフロントエンド開発への行き方：ドラッグ効果のdiv要素の実現

アイデアの実現：

ダウン、マウスのドラッグを開始
マウスの位置とマウス位置の記録素子を押してください
マウスの現在位置のマウスのノートをドラッグします
現在のマウス位置 - マウスを押したときにマウス位置の移動距離=
要素位置=位置+マウスの移動距離要素は、マウスを押したとき

コード：

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、研究のフロントエンドである、あなたがWebページを作成したい場合は、クールなプログラミングを勉強したいです。ご自身は、HTML5実際の学習教材が仕上げされているプロジェクトの最後に移動するには、[特殊効果、ゲーム、プラグインパッケージのデザインパターンを冷却する]最も基本的なHTML + CSS + JSから、最も包括的な研究材料フロントエンド2019を与えたコンパイルすべてのフロントエンドジュニアパートナーは、自分のスキルをアップグレードするジョブ、または大学生だけでなく、作業をWebフロントエンドを学ぶ、または変更したいと考えていました、学ぶことを学ぶためにジュニアパートナーの参加を歓迎します。

クリック：参加

実際のフロントエンド開発への行き方：ドラッグ効果のdiv要素の実現

おすすめ