首页 > > 网页制作 > Javascript >

js/es6 元素拖动

2019-01-21 02:40:41来源：博客园阅读 ()

元素事件：鼠标按下事件/鼠标移动事件/鼠标松开事件

元素样式：让元素脱离文档流，采用绝对定位的方式。

一、鼠标按下事件

当鼠标在元素上面按下时，保存元素的初始偏移量和鼠标按下时的坐标，然后在状态变量里面标记当前状态为按下状态。

二、鼠标移动事件

当鼠标拖动元素移动时，我们通过计算鼠标从起始位到移动位之间的偏移量来求元素应该移动的距离。

元素移动距离= 初始坐标 + (鼠标拖动坐标 - 鼠标按下坐标 )

三、鼠标松开事件

当鼠标松开后，我们把状态变量重置为假，表示当前拖动结束。

HTML代码：

<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <title>js拖动效果</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="node.js"></script>
</head>

<body>
    <div id="drag">拖动我！</div>
    <script>
        let o = document.querySelector("#drag");
        let e = new NodeElement(o);
        e.draggable();
    </script>
</body>

</html>

CSS代码：

#drag{
    width: 100px;
    height: 100px;
    background: red;
    position:absolute;
    cursor: move;
    line-height: 100px;
    text-align: center;
}

JS脚本代码：

'use strict';

/** 私有属性 */
const _nodexy = Symbol('_nodexy');   // 节点坐标
const _startxy = Symbol('_startxy');    // 起始坐标
const _mousedown = Symbol('_mousedown'); // 判断鼠标是否按下

/**
 * 节点元素类
 */
class NodeElement {

    /**
     * 构造函数
     * @param {HTMLElement} element 
     */
    constructor(element) {
        this.element = element;
        this[_nodexy] = [0, 0]; // 节点坐标
        this[_mousedown] = false;  // 判断鼠标是否按下
        this[_startxy] = [0, 0]; // 起始坐标
    }

    /**
     * 拖动
     */
    draggable() {

        // 按下事件
        this.element.addEventListener("mousedown", (event) => {
            this[_mousedown] = true;
            this[_startxy] = [event.clientX, event.clientY];
            this[_nodexy] = [this.element.offsetLeft, this.element.offsetTop];
        });

        // 移动
        document.addEventListener("mousemove", (event) => {
            // 计算元素移动距离
            // 元素移动距离= 初始坐标 + (鼠标拖动坐标 - 鼠标按下坐标 ) 
            // 事件： 按下事件（开始） / 鼠标移动事件（进行中） / 鼠标松开事件（结束）
            if (this[_mousedown]) {
                this.element.style.left = this[_nodexy][0] + (event.clientX - this[_startxy][0]) + 'px';
                this.element.style.top = this[_nodexy][1] + (event.clientY - this[_startxy][1]) + 'px';
            }
        });

        // 松开
        this.element.addEventListener("mouseup", (event) => {
            this[_mousedown] = false;
        });
    }
}