使用 JavaScript 实现编辑器拖拽的简单步骤！

css在哪里

于 2023-12-08 13:59:19 发布

阅读量564

点赞数 24

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_63490373/article/details/134876258

版权

在实现元素拖拽效果时，通常需要为目标元素添加 mousedown、mousemove 和 mouseup 这三个事件监听器。当鼠标按下需要拖拽的元素时，通过将 mousemove 事件与拖动事件绑定，处理相应的逻辑。在鼠标松开时，移除拖动事件。

以下是一个常见的案例，例如在编辑器中，可以观察到文件目录模块和内容模块之间可以通过拖拽调整大小，如下图所示：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        body {
            display: flex;
            margin: 0;
            min-height: 100vh;
        }
        
        .scalable {
            min-width: 200px;
            position: relative;
            background-color: beige;
        }
        
        .content {
            display: block;
            width: 150px;
            user-select: none;
        }
        
        .main {
            flex: 1;
            background-color: aqua;
        }
        
        .scalable .content {
            padding: 20px;
            padding-right: 34px;
        }
        
        .scalable .separator {
            width: 14px;
            height: 100%;
            background-color: #fff;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
            position: absolute;
            top: 0;
            right: 0;
            cursor: col-resize;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .scalable .separator .separator-handle {
            width: 2px;
            height: 14px;
            display: inline-block;
            background-color: #e9e9e9;
            margin: 0 1px;
        }
    </style>
</head>

<body>
    <!-- 可伸缩区域 -->
    <div class="scalable">
        <!-- 内容区域 -->
        <div class="content"></div>
        <!-- 分隔条 -->
        <div class="separator">
            <!-- 分隔手柄 -->
            <span class="separator-handle"></span>
            <span class="separator-handle"></span>
        </div>
    </div>
    <!-- 主内容区域 -->
    <div class="main"></div>
    <script>
        let startX, startWidth

        // 获取指定选择器的DOM元素
        const $ = (tag) => document.querySelector(tag)

        // 获取可伸缩区域的当前宽度
        const getWidth = () =>
            parseInt(window.getComputedStyle($('.scalable')).width)

        // 拖拽过程中的处理函数
        const onDrag = (e) => {
            // 计算新的宽度
            const newWidth = e.clientX - startX + startWidth
                // 设置可伸缩区域的宽度
            $('.scalable').style.width = newWidth + 'px'
        }

        // 拖拽停止时的处理函数
        const stopDrag = () => {
            // 移除mousemove和mouseup事件监听
            document.documentElement.removeEventListener('mousemove', onDrag)
            document.documentElement.removeEventListener('mouseup', stopDrag)
        }

        // 拖拽开始时的处理函数
        const startDrag = (e) => {
            // 记录初始鼠标位置和可伸缩区域的初始宽度
            startX = e.clientX
            startWidth = getWidth()
                // 添加mousemove和mouseup事件监听
            document.documentElement.addEventListener('mousemove', onDrag)
            document.documentElement.addEventListener('mouseup', stopDrag)
        }

        // 给分隔条添加mousedown事件监听，触发拖拽开始
        $('.separator').addEventListener('mousedown', startDrag)
    </script>
</body>

</html>

实现效果如下：

css在哪里

关注

24
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 JavaScript 实现编辑器拖拽的简单步骤！

当鼠标按下需要拖拽的元素时，通过将 mousemove 事件与拖动事件绑定，处理相应的逻辑。在鼠标松开时，移除拖动事件。在实现元素拖拽效果时，通常需要为目标元素添加。
复制链接

扫一扫