Flexbox 布局是一种流式布局，它能够很好地适应不同的设备和屏幕尺寸。而在使用 Flexbox 布局时，实现元素在容器内的拖拽排序是一项常见的需求。本文将详细介绍 Flexbox 布局下如何实现元素的拖拽排序。
前置知识
在开始之前，需要了解以下几个前置知识：
- HTML5 的拖放 API:
draggable,ondragstart,ondragover,ondragenter,ondragleave,ondragend和ondrop。 - Flexbox 的基本概念和属性：
display:flex,flex-direction,flex-wrap,flex-flow,justify-content,align-items和align-self。
实现思路
实现元素的拖拽排序，本质上就是将拖拽的元素插入到目标位置，并重新排列顺序。而在 Flexbox 布局下，元素的位置是由容器自动计算的，因此需要通过改变元素的顺序来实现位置的变化。
实现的具体思路如下：
- 将容器设置为 Flexbox 布局，以方便排序。
- 为拖拽元素注册拖放事件。
- 在拖放事件中，记录拖拽元素的位置，计算目标位置，并将目标位置插入到容器中。
- 重新排列容器内的所有元素，完成排序。
具体实现请参见下面的代码。
示例代码
HTML 代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- ------------ ----------------- ---- - ------ ---- ------------ ----------------- ---- - ------ ---- ------------ ----------------- ---- - ------ ------展开代码
CSS 代码如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ----------- ------------ ----------- ------ ------ ------- ------ ------- --- ----- ----- -------- ----- - ----- - ------ ------ ------- ------ ----------------- ----- ------ ----- ----------- ------- ------------ ------ ------- ----- -展开代码
JavaScript 代码如下：
-- -------------------- ---- ------- --- --------- - ------------------------------------- --- ----- - ------------------------------------ --- ----------- - ----- --- ---- - - -- - - ------------- ---- - -------------------------------------- -------- ------- - ----------- - ----- ---------------------------------------- ------------------------ -------------------------------- - ------- --- ------------------------------------- -------- ------- - ----------------------- ----------------------------- - ------- --- ------ - ------------- ----- ------- --- --------- -- ----------------------------------- - ------ - ------------------ - -- ------- --- --------- -- ------ --- ------------ - --- ---- - ------------------------------- --- - - ------------- - ---------- -- -- - ---------- - -- - ----------------------------------- -------- - ---- - ----------------------------------- -------------------- - - --- -------------------------------------- -------- ------- - ----------------------- --- ------ - ------------- ----- ------- --- --------- -- ----------------------------------- - ------ - ------------------ - -- ------- --- --------- -- ------ --- ------------ - ---------------------------------- - --- -------------------------------------- -------- ------- - --- ------ - ------------- ----- ------- --- --------- -- ----------------------------------- - ------ - ------------------ - -- ------- --- --------- -- ------ --- ------------ - ------------------------------------- - --- ------------------------------------ -------- ------- - --- ------ - ------------- ----- ------- --- --------- -- ----------------------------------- - ------ - ------------------ - -- ------- --- --------- -- ------ --- ------------ - ------------------------------------- - ----------- - ----- --- -展开代码
在上面的代码中，首先获取了容器和所有的元素，然后为所有元素注册了拖放事件。在拖放事件中，首先记录了拖拽元素的位置，并计算了目标位置，并将目标位置插入到容器中。然后重新排列容器内的所有元素，完成排序。
指导意义
本文详细介绍了 Flexbox 布局下如何实现元素的拖拽排序。通过学习本文，读者可以了解到如何使用 HTML5 的拖放 API 和 Flexbox 布局，以及如何将它们结合起来实现常见的应用场景。同时，本文的示例代码也为读者提供了一个完整的实现，并可以借鉴和扩展用于自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c2baa1314edc2684c36d3c
