在前端开发中，拖拽排序布局是一种经常使用的功能，经常用于列表数据的重新排序，优化用户体验。而 CSS Grid 可以帮助开发者实现这种布局，让页面变得更加灵活和易于移动。
CSS Grid 简介
CSS Grid 是一种基于网格的布局系统，可以在行和列上进行简单的布局。它支持多种不同的单位，包括像素、百分比和视窗单位。
CSS Grid 将网格分为行和列，并指定容器中每个网格的大小和位置。这使得它成为一种灵活的布局选择，因为它可以自适应各种屏幕大小、设备和浏览器尺寸。
实现拖拽排序布局
要实现拖拽排序布局，我们需要将列表项（例如文本、图像或按钮）转换为网格项，并使用 CSS Grid 系统来管理它们的排序和位置。为了更加灵活和响应式，我们需要使用 JavaScript 来添加拖拽元素的事件监听和位置计算。
HTML 结构
首先，我们需要一个基本的 HTML 结构来为列表项创建网格项。以下示例代码创建了一个包含 6 个列表项的简单列表：
<div class="grid-container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </div>
CSS 样式
接下来，我们需要添加一些基本的 CSS 样式来设置网格容器和网格项的属性，以使它们在网格中正确地对齐和定位。
以下示例代码为我们的样式表添加了样式，将页面分为 3 列，每一列的网格项高度为 100 像素和宽度为 33.33%，并水平和垂直对齐：
-- -------------------- ---- ------- --------------- - -------- ----- ---------------------- --------- ----- --------------- ------ -------------- ------- ------------ ------- --------- ----- - ----- - ----------------- ----- ------ ----- ---------- ----- -------- ----- ------------ ------- ---------------- ------- -
JavaScript 功能
现在，我们需要用 JavaScript 来使每个网格项成为可拖动元素。以下代码展示了如何实现：
-- -------------------- ---- -------
--- ----- - -----------------------------------
--- -------- - -----
--- ---- - - -- - - ------------- ---- -
--- ---- - ---------
---------------------------------- ---------- -
-------- - -----
------------- -- -
------------------ - -------
-- ---
---
-------------------------------- ---------- -
------------- -- -
---------------------- - -------
-------- - -----
-- ---
---
--- ---- - - -- - - ------------- ---- -
--- ------ - ---------
-- ----- --- ------- -
----------------------------------- ----------- -
-------------------
---
------------------------------- ----------- -
-------------------------------------- ------
---
-
-
-这段代码中，我们使用 JavaScript 将每个网格项变成可拖动元素。我们监听每个元素的鼠标事件，以响应鼠标拖动和释放的事件。在我们的代码中，拖动开始时，我们将该元素的 "dragItem" 变量设置为当前拖动的元素，然后通过 setTimeout 将其隐藏，以使用户更容易跟进拖动操作。当拖动操作结束时，我们将拖动元素重新显示出来并将该变量设置为 null。
然后，我们将目标元素和拖动元素作为参数传递给 drop 事件，并使用 parentNode.insertBefore() 方法来将拖动元素放置在目标元素之前。这就实现了拖动排序布局。
总结
通过使用 CSS Grid，我们可以可以轻松地创建灵活的列表排序布局。结合 JavaScript 事件监听，我们可以使页面元素成为拖动目标。这些技术可以增加用户体验并提高页面的灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481339848841e989409dd8b