JS特效——层的拖动

原创于 2018-03-26 12:42:56 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

用到的JavaScript知识：event.clientX, event.clientY。

用到了三个事件：onmousedown，onmousemove，onmouseup。

源码：

<!DOCTYPE html>
<html>

<head>
    <title>可以拖动的层</title>
    <meta charset="utf-8">
</head>

<body>
    <!--为了演示方便将将css写成行内样式-->
    <div id="box" style="border: 1px solid black; position: absolute; left: 200px; top: 100px;
 width: 300px; height: 200px; z-index: 99;">
        <h4 align="right" id="boxTitle" style="line-height: 18px; margin: 0; padding: 3px; 
background: black; opactity: 0.75; border: 1px solid black; height: 18px; cursor: pointer;">
            <span style="float: left; color: white;">这是可拖动的层</span>
        </h4>
        <div id="boxMsg" style="text-align: center;">这是一个可拖动的层</div>
    </div>
    <script>
        // 页面加载的时候绑定事件
        window.onload = init;
        // 用于判断是否在移动
        let isOver = false;
        let l = 0;
        let t = 0;

        function init() {
            let boxTitle = document.getElementById('boxTitle');
            boxTitle.onmousedown = mouseDown;
            boxTitle.onmousemove = mouseMove;
            boxTitle.onmouseup = mouseUp;
        }
        // 鼠标按下，获取到鼠标的的xy轴的位置
        function mouseDown(event) {
            let e = event;
            x = e.clientX;
            y = e.clientY;
            l = parseInt(document.getElementById('box').style.left);
            t = parseInt(document.getElementById('box').style.top);
            isOver = true;
        }
        // 鼠标移动时候获取实时鼠标位置，并算出移动目标的top，left的位置。
        function mouseMove(event) {
            let e = event;
            if (isOver) {
                let box = document.getElementById('box');
                let newLeft = l + e.clientX - x;
                let newTop = t + e.clientY - y;
                box.style.top = newTop + 'px';
                box.style.left = newLeft + 'px';
            }
        }
        // 鼠标抬起
        function mouseUp() {
            if (isOver) {
                isOver = false;
            }
        }
    </script>
</body>

</html>