Flexbox 布局实现底部自适应的可拖拽 UI 界面

前言

在前端开发中，我们经常需要实现具有自适应性的 UI 界面，并且这些界面要支持拖拽功能等交互特性。本文将介绍如何使用 Flexbox 布局实现底部自适应的 UI 界面，并添加简单的拖拽交互。

引言

Flexbox 是现代 CSS 布局中的一种强大的技术，它可以使得开发者更加轻松地实现各种复杂的布局。Flexbox 定义了一种新的容器和项目的布局方式，通过它，我们可以轻松地在布局中控制项目元素的位置和大小。而且它的 API 相对简单，易于上手，非常适合实现响应式布局。

实现

我们先来看一下最终的效果：

下面是实现的步骤：

1. 创建 HTML 结构

我们需要创建一个 Flexbox 容器，容器中包含两个子项目。其中一个子项目作为底部菜单，是固定高度的；另一个子项目为内容区域，需要占据剩余空间，实现底部自适应效果。

<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis tortor sed nisi bibendum ornare. Nunc in augue id velit auctor bibendum. Quisque eu feugiat lectus. Sed eu rutrum nibh. Aliquam faucibus nisi in hendrerit euismod. Vivamus tristique ultrices elit ac mattis. Donec sagittis aliquam nisi, sed venenatis neque semper non. </p>
  </div>
  <div class="menu">
    <p>菜单</p>
  </div>
</div>

1. 样式设置

为了实现底部自适应效果，我们需要设置 container 为 Flexbox 布局，并设置 content 的 flex-grow 属性为 1，这样它就可以占据剩余空间，并且自适应高度。为了实现拖拽效果，我们还需要为 menu 添加 draggable="true" 属性。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex-grow: 1;
}

.menu {
  height: 50px;
  background-color: #ddd;
  text-align: center;
  cursor: move;
}

1. JS 实现拖拽效果

接下来，我们需要添加一些 JS 代码以实现拖拽效果。我们可以使用 HTML5 中提供的拖拽 API，该 API 由以下几个事件组成：

• dragstart，当拖动元素时触发，用于初始化拖动操作。
• drag，当拖动元素时触发，用于实现拖动的动画效果。
• dragend，当拖动停止时触发，用于清理拖动操作。

const menu = document.querySelector('.menu')

let offsetY = 0

menu.addEventListener('dragstart', (e) => {
  // 获取鼠标所在位置距离 menu 顶部的距离
  offsetY = e.pageY - menu.offsetTop
})

menu.addEventListener('drag', (e) => {
  // 设置菜单的 top 值，使其跟随鼠标移动
  menu.style.top = e.pageY - offsetY + 'px'
})

menu.addEventListener('dragend', (e) => {
  // 拖动结束时清除 top 值
  menu.style.top = ''
})

在浏览器中运行后，我们已经可以拖拽菜单移动到任意位置。

总结

通过使用 Flexbox 和 HTML5 的拖拽 API，我们可以轻松地实现底部自适应的 UI 界面，并添加简单的交互效果。Flexbox 布局相对简单且易于上手，并且可以用来实现各种自适应布局，非常适合使用在响应式 Web 开发中。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659fb081add4f0e0ff8371b8