纯JS、CSS模拟可上拉下拉的组件框

Poulyield

已于 2025-03-22 18:07:26 修改

阅读量356

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript CSS 文章标签： javascript css html html5 css3

于 2021-04-18 17:25:32 首次发布

本文链接：https://blog.youkuaiyun.com/ksws0319440/article/details/115835357

本文介绍了一种使用HTML、CSS和JavaScript实现可拖动面板的方法。通过简单的代码示例，展示了如何创建一个可以被鼠标拖动的面板，并使其在限定区域内移动。此方案适用于需要自定义布局的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下(有个鼠标点着灰色条拖动它的哈)：

效果图

接下来look look你们期盼的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{

            overflow: hidden;
        }
        .moveBar{
            width: 300px;
            height: 15px;
            background-color: #aaa;
            cursor: move;
        }
        .block{
            width: 500px;
            height: 350px;
            font-size: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0062CC;
        }
        .box{
            width: 300px;
            height: 300px;
            font-size: 28px;
            background-color: aquamarine;
            position:relative;
        }
    </sty