Flexbox 布局是一种现代的 CSS 布局方式，它能够更加灵活地控制元素的排列顺序和布局方式。在实际的开发中，我们经常需要实现元素的拖拽排序功能，这篇文章将介绍如何在 Flexbox 布局中实现这一功能。
实现思路
在 Flexbox 布局中，我们可以使用 order 属性来控制元素的排列顺序。因此，实现元素的拖拽排序功能的基本思路就是通过拖拽操作来改变元素的 order 属性值，从而实现元素的重新排列。
具体来说，我们可以在拖拽开始时记录当前拖拽元素的 order 值，并将其设置为一个较大的值，使得该元素会被置于容器的最后面。然后，在拖拽过程中，可以通过计算鼠标位置和容器中其它元素的位置关系来确定被拖拽元素应该插入的位置，并将其对应的 order 值设置为该位置对应的值。最后，在拖拽结束时，重新排列所有元素的 order 值，从而实现元素的拖拽排序功能。
实现代码
下面是一个简单的示例代码，演示了如何在 Flexbox 布局中实现元素的拖拽排序功能：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexbox Sortable Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: #f00;
color: #fff;
font-size: 24px;
text-align: center;
line-height: 100px;
cursor: move;
user-select: none;
}
</style>
</head>
<body>
<div class="container">
<div class="item" data-order="1">1</div>
<div class="item" data-order="2">2</div>
<div class="item" data-order="3">3</div>
<div class="item" data-order="4">4</div>
<div class="item" data-order="5">5</div>
</div>
<script>
var container = document.querySelector('.container');
var items = document.querySelectorAll('.item');
var draggedItem = null;
var draggedItemOrder = null;
// 记录拖拽元素的初始 order 值，并将其设置为一个较大的值
function handleDragStart(e) {
draggedItem = this;
draggedItemOrder = this.dataset.order;
this.style.order = 9999;
}
// 计算拖拽元素应该插入的位置，并设置其对应的 order 值
function handleDragOver(e) {
e.preventDefault();
var targetItem = this;
var targetItemOrder = targetItem.dataset.order;
if (draggedItem !== targetItem) {
if (e.clientY < targetItem.offsetTop + targetItem.offsetHeight / 2) {
targetItem.style.order = draggedItemOrder;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item !== draggedItem && item !== targetItem) {
var itemOrder = item.dataset.order;
if (itemOrder >= draggedItemOrder && itemOrder < targetItemOrder) {
item.style.order = parseInt(itemOrder) + 1;
}
}
}
draggedItemOrder = targetItemOrder;
} else {
targetItem.style.order = parseInt(draggedItemOrder) + 1;
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item !== draggedItem && item !== targetItem) {
var itemOrder = item.dataset.order;
if (itemOrder > draggedItemOrder && itemOrder <= targetItemOrder) {
item.style.order = parseInt(itemOrder) - 1;
}
}
}
draggedItemOrder = parseInt(draggedItemOrder) + 1;
}
}
}
// 重新排列所有元素的 order 值
function handleDragEnd(e) {
draggedItem.style.order = draggedItemOrder;
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.dataset.order = item.style.order;
}
}
// 绑定拖拽事件
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.addEventListener('dragstart', handleDragStart);
item.addEventListener('dragover', handleDragOver);
item.addEventListener('dragend', handleDragEnd);
}
</script>
</body>
</html>在这个示例代码中，我们使用了 HTML5 的拖拽 API 来实现元素的拖拽功能。具体来说，通过给每个元素添加 draggable="true" 属性来启用拖拽功能，并通过绑定 dragstart、dragover 和 dragend 事件来处理拖拽操作。
在 handleDragStart 函数中，我们记录了拖拽元素的初始 order 值，并将其设置为一个较大的值（这里设置为 9999），从而使得拖拽元素会被置于容器的最后面。
在 handleDragOver 函数中，我们计算了拖拽元素应该插入的位置，并设置其对应的 order 值。具体来说，我们比较了鼠标位置和容器中其它元素的位置关系，从而确定了拖拽元素应该插入的位置，并对其它元素的 order 值进行了相应的调整。
在 handleDragEnd 函数中，我们重新排列了所有元素的 order 值，从而实现了元素的拖拽排序功能。
学习与指导意义
本文介绍了如何在 Flexbox 布局中实现元素的拖拽排序功能，这是一个实用性很强的技术。通过学习本文，读者可以了解到如何使用拖拽 API 和 order 属性来实现元素的拖拽排序功能，同时也可以了解到如何在 Flexbox 布局中灵活控制元素的排列顺序和布局方式。
实际上，本文介绍的技术不仅仅局限于 Flexbox 布局，也适用于其它布局方式。因此，读者可以将本文介绍的思路和代码应用到其它布局方式中，从而实现更加灵活和实用的拖拽排序功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4c355a941bf71348f36d1