前言
在实际开发中，经常会遇到需要对列表进行拖拽排序的需求。而在 Flexbox 布局中，我们可以通过简单的 CSS 和 JavaScript 实现这样的效果。本文将讲解如何利用 Flexbox 布局实现列表拖拽排序，并探究其中的原理和优化技巧。
简单实现
首先，我们来看一个简单的实现方法。在 HTML 中，我们需要一个容器元素和多个子元素，它们将组成我们需要排序的列表。
<div class="list"> <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>
接下来，我们需要为这些元素添加样式，并使用 Flexbox 布局。通过设置 display: flex;，我们可以将这些元素放到一个主轴上，从而方便进行排序。
-- -------------------- ---- ------- ----- - -------- ----- --------------- ------- - ----- - ----- -- ----------------- -------- ------- ---- -------- ----- ------- ----- -- -------- -- -
接下来，我们需要使用 JavaScript 实现拖拽排序的逻辑。这里我们使用 HTML5 的 Drag and Drop API，它提供了许多事件和方法，能够方便地实现拖拽排序。
-- -------------------- ---- -------
----- ----- - -----------------------------------
------------------ -- -
---------------------------------- -----------
---------------------------------- -----------
--------------------------------- ----------
---------------------------------- -----------
----------------------------- ------
-------------------------------- ---------
---
--- ------------ - -----
-------- ----------- -
------------ - -----
------------- -- -
------------------ - ------- -- -----------
-- ---
-
-------- ---------------- -
-----------------------
-
-------- --------------- -
-----------------------
----- -------- - -----------------------------
----- ------ - ------------- - ------------ - --------------- - --
-- ------------------
-------------------- - --------------------------
---------------------------- - --------------------------- - ------------ - --------------- - -------
-
-------- ----------- -
-- ----------
-------------------- - ---
-
-------- ------ -
----- -------- - -----------------------------
----- ------ - ------------- - ------------ - --------------- - --
----- ----- - ------------------------------------------------------
-- -------------------
-- ------- - -- -
--------------------------------------------- -------------------------
- ---- -- ------- - -- -
--------------------------------------------- ------
-
-------------------- - ---
-
-------- --------- -
------------------ - --- -- -----------
-上述代码会实现一个非常基本的列表拖拽排序效果。当我们将鼠标拖拽到一个元素上时，该元素会根据鼠标位置调整位置，而我们拖拽的元素将会替换到它的位置。
然而，这个实现方法还有很多问题和不足，下面我们将进行改进和优化。
问题和改进
首先，我们需要解决的一个问题是，当拖拽元素替换到一个位置时，其他元素的位置并没有重新排布，这可能导致视觉效果不佳。我们可以通过在每个元素上设置一个 order 属性，来实现对它们的重新排布。
-- -------------------- ---- ------- ----- - ----- -- ----------------- -------- ------- ---- -------- ----- ------- ----- ------ -- -- ----- - -- - -------------- - -------- ---- -- --------- -- -
在 JavaScript 中，我们可以在拖拽结束后，根据每个元素的当前位置，调整它们的 order 值。这样，所有元素的顺序将会重新排布，从而实现更好的视觉效果。
-- -------------------- ---- -------
-------- ------ -
----- -------- - -----------------------------
----- ------ - ------------- - ------------ - --------------- - --
----- ----- - ------------------------------------------------------
-- ------- ----- -
---------------------------------------
------------ -- ---- --- -------------
--------------- -- -- -
-- -- - ------ -
---------------- - --
- ---- -
---------------- - - - --
-
---
-- ------------------
--------------------------------------------- ------
---------------------------- - ---
------------------------ -- -
------------------------------------------
-------------------------- - --- -- -----------
------------ - -----
---
-接下来，我们还需要解决的一个问题是，当我们使用 translateY 来移动元素位置时，如果列表中的元素大小不一时，会导致移动的距离不准确。比如，一个大元素和一个小元素大小不同，但它们的背景色相同。这时，我们拖拽小元素时，移动的距离就会比预期的更大。
针对这个问题，我们可以通过设置每个元素的高度，来强制让它们在拖拽时保持相同的大小。例如，我们可以设置每个元素的高度为 40px。此时，拖拽时就不会出现上述问题了。
.item {
height: 40px;
/* ... */
}总结
本文介绍了如何利用 Flexbox 布局和 Drag and Drop API，实现列表拖拽排序的功能。通过实现和优化，我们得到了一个高质量、稳定、兼容性强的效果。
Flexbox 布局虽然非常强大，但在实现这种拖拽排序效果时，并不是必须的。如果你不直接使用 Flexbox，也能实现相同的效果。不过，使用 Flexbox 可以让我们更方便地实现和调整布局，并提升可读性和可维护性。如果你还不太熟悉 Flexbox，建议花时间学习一下。
示例代码：https://codepen.io/pen/zYvBvJB
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f3ef45f6b2d6eab3d2627d