JS拖拽排序|极客笔记

JS拖拽排序

在网页开发中，拖拽排序是一个常见且实用的功能。通过拖拽元素，可以改变元素的位置，实现排序的效果。在本文中，我们将学习如何使用JavaScript实现拖拽排序的功能。

实现思路

要实现拖拽排序，首先需要明确以下几点：

给需要拖拽排序的元素添加拖拽事件。
在拖拽开始时记录拖拽元素的位置。
在拖拽过程中实时更新拖拽元素的位置。
在拖拽结束时根据鼠标释放的位置确定元素的最终位置。
对排序后的元素重新排序。

根据以上思路，我们可以编写实现拖拽排序的代码。

HTML结构

首先，我们需要准备一个包含需要排序的元素的HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Sorting</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div id="sortable-list">
    <div class="sortable-item">Item 1</div>
    <div class="sortable-item">Item 2</div>
    <div class="sortable-item">Item 3</div>
    <div class="sortable-item">Item 4</div>
    <div class="sortable-item">Item 5</div>
</div>

<script src="script.js"></script>
</body>
</html>

在这段HTML代码中，我们创建了一个ID为sortable-list的<div>元素，其中包含了5个class为sortable-item的子元素，它们就是我们需要拖拽排序的元素。

CSS样式

为了让排序的元素有视觉效果，我们可以为其添加一些CSS样式。

.sortable-item {
    cursor: move;
    padding: 10px;
    margin: 5px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
}

这段CSS代码为sortable-item元素添加了样式，使其具有边框、背景色和间距。

JavaScript代码

接下来，我们来编写JavaScript代码实现拖拽排序功能。

const sortableList = document.getElementById('sortable-list');
let dragging = null;

sortableList.addEventListener('mousedown', (e) => {
    if (e.target.classList.contains('sortable-item')) {
        dragging = e.target;
        dragging.classList.add('dragging');
    }
});

document.addEventListener('mousemove', (e) => {
    if (dragging) {
        dragging.style.left = e.clientX + 'px';
        dragging.style.top = e.clientY + 'px';
    }
});

document.addEventListener('mouseup', () => {
    if (dragging) {
        const items = sortableList.querySelectorAll('.sortable-item');
        const newPosition = Array.from(items).indexOf(dragging);
        const childNodes = Array.from(sortableList.childNodes).filter(node => node.nodeType === 1);
        const currentIndex = childNodes.indexOf(dragging);
        childNodes.splice(currentIndex, 1);
        childNodes.splice(newPosition, 0, dragging);
        sortableList.innerHTML = '';
        childNodes.forEach(node => sortableList.appendChild(node));
        dragging.classList.remove('dragging');
        dragging = null;
    }
});

在以上代码中，我们首先获取了sortable-list元素，然后监听鼠标按下、移动和释放的事件，在拖拽开始时记录被拖拽元素，拖拽过程中更新元素位置，拖拽结束时重新排序元素。