拖拽排序js案例详解：新手入门教程

本文主要是介绍拖拽排序js案例详解：新手入门教程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

概述

本文详细介绍了如何实现拖拽排序功能，包括HTML结构、CSS样式和JavaScript代码的编写。通过具体的拖拽排序js案例，展示了如何监听拖拽事件和调整DOM顺序，确保数据结构的一致性。此外，还提供了视觉反馈和异常处理的解决方案，以提升用户体验。

1. 拖拽排序简介

1.1 什么是拖拽排序

拖拽排序是一种用户交互方式，允许用户通过拖动元素在界面上重新排列这些元素的顺序。这种交互方式直观且易于使用，能够提供良好的用户体验。拖拽排序广泛应用于各种界面和应用中，如文件管理器、日程安排工具和在线协作平台。

1.2 拖拽排序应用场景

文件管理器：用户可以拖动文件夹或文件重新排序，以便更好地组织和管理文件。
日程安排：用户可以通过拖拽任务或事件来调整它们在日历上的顺序。
在线协作平台：团队成员可以拖动任务或项目卡片来重新排列优先级或时间线。
购物车管理：用户可以在购物车中拖拽商品来调整购买顺序或数量。
网页布局：前端开发者可以使用拖拽工具来调整网页元素的位置和层次。

2. 准备工作

2.1 创建基本HTML结构

拖拽排序功能的基础是HTML结构。你需要创建一个简单的列表，每个列表项都可以被拖拽。下面是一个基本的HTML结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>拖拽排序示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sortable-list">
        <div class="item" draggable="true">项目 1</div>
        <div class="item" draggable="true">项目 2</div>
        <div class="item" draggable="true">项目 3</div>
    </div>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="script.js"></script>
</body>
</html>

2.2 引入必要的CSS样式

为了使列表项更加美观和易于拖拽，你还需要引入一些基本的CSS样式。这些样式包括设置元素的宽度、高度、背景颜色等。

body {
    font-family: Arial, sans-serif;
}

.sortable-list {
    border: 1px solid #ccc;
    padding: 10px;
    width: 200px;
    list-style: none;
    background-color: #f9f9f9;
}

.item {
    padding: 10px;
    margin: 5px 0;
    background-color: #fff;
    cursor: move;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.item:hover {
    background-color: #f1f1f1;
}

3. 实现基础拖拽功能

3.1 使用JavaScript监听拖拽事件

拖拽排序功能的核心是使用JavaScript监听拖拽事件。你需要监听dragstart、drag和dragend三个事件。这些事件分别对应拖拽开始、拖动中和拖拽结束。

const items = document.querySelectorAll('.item');

items.forEach(item => {
    item.addEventListener('dragstart', dragStart);
    item.addEventListener('dragend', dragEnd);
});

function dragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
    setTimeout(() => e.target.classList.add('dragging'), 0);
}

function dragEnd(e) {
    e.target.classList.remove('dragging');
}

3.2 处理拖拽开始、拖动和结束事件

接下来，你需要处理拖拽开始、拖动和结束事件。这些事件分别在拖拽开始、拖动过程中和拖拽结束时触发。

const dropContainer = document.querySelector('.sortable-list');

dropContainer.addEventListener('dragover', dragOver, false);
dropContainer.addEventListener('dragenter', dragEnter, false);
dropContainer.addEventListener('dragleave', dragLeave, false);
dropContainer.addEventListener('drop', drop, false);

function dragOver(e) {
    e.preventDefault();
}

function dragEnter(e) {
    e.preventDefault();
}

function dragLeave(e) {
    e.target.classList.remove('over');
}

function drop(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(id);
    const dropTarget = e.target;
    if (dropTarget.tagName.toLowerCase() === 'div') {
        dropTarget.before(draggedItem);
    }
}

4. 实现排序功能

4.1 通过JavaScript调整DOM顺序

拖拽排序功能不仅需要调整DOM元素的位置，还需要更新数据结构以保持一致性。通过JavaScript调整DOM顺序时，可以使用before和after方法将元素插入到正确的位置。

function drop(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(id);
    const dropTarget = e.target;
    if (dropTarget.tagName.toLowerCase() === 'div') {
        dropTarget.before(draggedItem);
    }
}

4.2 更新排序的数据结构

除了调整DOM顺序，你还需要更新排序的数据结构以保持数据一致性。你可以将DOM元素存储在一个数组中，并在拖拽过程中更新这个数组。

let itemsArray = [];

function initializeItemsArray() {
    const items = document.querySelectorAll('.item');
    itemsArray = Array.from(items).map(item => item.id);
}

function updateItemsArray(draggedItemId, dropTargetId) {
    const draggedIndex = itemsArray.indexOf(draggedItemId);
    const dropTargetIndex = itemsArray.indexOf(dropTargetId);
    itemsArray.splice(dropTargetIndex, 0, itemsArray.splice(draggedIndex, 1)[0]);
}

initializeItemsArray();

function drop(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(id);
    const dropTarget = e.target;
    if (dropTarget.tagName.toLowerCase() === 'div') {
        dropTarget.before(draggedItem);
        const dropTargetId = dropTarget.id;
        updateItemsArray(id, dropTargetId);
    }
}

5. 改进用户体验

5.1 添加视觉反馈

为用户提供视觉反馈可以帮助他们更好地理解和操作拖拽排序功能。你可以在拖拽过程中改变元素的样式，以显示当前元素的状态。

function dragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
    setTimeout(() => e.target.classList.add('dragging'), 0);
}

function dragEnd(e) {
    e.target.classList.remove('dragging');
}

function dragOver(e) {
    e.preventDefault();
    e.target.classList.add('over');
}

function dragLeave(e) {
    e.target.classList.remove('over');
}

function drop(e) {
    e.preventDefault();
    e.target.classList.remove('over');
    const id = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(id);
    const dropTarget = e.target;
    if (dropTarget.tagName.toLowerCase() === 'div') {
        dropTarget.before(draggedItem);
    }
}

5.2 处理边界情况和异常事件

处理边界情况和异常事件可以提高拖拽排序功能的健性和可靠性。例如，当元素已经被拖拽到目标位置时，你可以阻止进一步的操作。

function drop(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(id);
    const dropTarget = e.target;
    if (dropTarget.tagName.toLowerCase() === 'div' && !dropTarget.classList.contains('dragging')) {
        dropTarget.before(draggedItem);
        const dropTargetId = dropTarget.id;
        updateItemsArray(id, dropTargetId);
    }
}

6. 测试与调试

6.1 常见问题及解决方案

在实现拖拽排序功能时，可能会遇到一些常见的问题和异常情况。以下是一些常见的问题及解决方案：

元素无法被拖拽：确保元素的draggable属性设置为true，并且CSS中没有阻止拖拽的样式。
拖拽后元素位置没有更新：检查drop事件中的逻辑，确保元素被正确地插入到目标位置，并且数据结构被正确更新。
视觉反馈不一致：确保视觉反馈的样式与事件处理逻辑一致，特别是在dragover、dragenter和dragleave事件中。

6.2 扩展功能和优化

你可以进一步扩展拖拽排序功能，添加更多功能和优化用户体验。例如，可以添加动画效果来平滑拖拽过程，或者允许用户撤销和重做操作。

function drop(e) {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const draggedItem = document.getElementById(id);
    const dropTarget = e.target;
    if (dropTarget.tagName.toLowerCase() === 'div' && !dropTarget.classList.contains('dragging')) {
        dropTarget.before(draggedItem);
        const dropTargetId = dropTarget.id;
        updateItemsArray(id, dropTargetId);
        // 添加动画效果
        draggedItem.style.transition = 'transform 0.3s ease-in-out';
        draggedItem.style.transform = 'translateY(-10px)';
        setTimeout(() => {
            draggedItem.style.transform = 'translateY(0)';
        }, 300);
    }
}

// 撤销和重做功能
let undoStack = [];
let redoStack = [];

function undo() {
    if (undoStack.length > 0) {
        const lastState = undoStack.pop();
        redoStack.push(lastState);
        itemsArray = lastState.itemsArray;
        const list = document.querySelector('.sortable-list');
        list.innerHTML = '';
        lastState.items.forEach(item => {
            const newItem = document.createElement('div');
            newItem.className = 'item';
            newItem.id = item.id;
            newItem.textContent = item.text;
            newItem.draggable = true;
            newItem.addEventListener('dragstart', dragStart);
            newItem.addEventListener('dragend', dragEnd);
            list.appendChild(newItem);
        });
    }
}

function redo() {
    if (redoStack.length > 0) {
        const nextState = redoStack.pop();
        undoStack.push(nextState);
        itemsArray = nextState.itemsArray;
        const list = document.querySelector('.sortable-list');
        list.innerHTML = '';
        nextState.items.forEach(item => {
            const newItem = document.createElement('div');
            newItem.className = 'item';
            newItem.id = item.id;
            newItem.textContent = item.text;
            newItem.draggable = true;
            newItem.addEventListener('dragstart', dragStart);
            newItem.addEventListener('dragend', dragEnd);
            list.appendChild(newItem);
        });
    }
}

function updateItemsArray(draggedItemId, dropTargetId) {
    const draggedIndex = itemsArray.indexOf(draggedItemId);
    const dropTargetIndex = itemsArray.indexOf(dropTargetId);
    itemsArray.splice(dropTargetIndex, 0, itemsArray.splice(draggedIndex, 1)[0]);
    undoStack.push({ itemsArray: [...itemsArray], items: [...document.querySelectorAll('.item')] });
}

initializeItemsArray();

这篇关于拖拽排序js案例详解：新手入门教程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript