拖拽库实战总结：从踩坑到精通的全过程分享

Tr° 统赫发布于 2026-02-02 14:10:16 交互阅读 2,004

原创

本文链接：https://www.jztheme.com/blog/interaction/18906.html

Tr° 统赫

赞 53 收藏反馈

先看效果，再看代码

今天来聊聊拖拽库的使用，我最近在项目中用到了几个拖拽库，感觉挺实用的，就来分享一下。直接上手写代码吧。

基础用法：拖拽列表项

首先，我们来看看如何使用一个简单的拖拽库来实现列表项的拖拽排序。这里我用的是 Sortable.js，这个库非常轻量且功能强大。

先看核心代码：

<!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 List</title>
    <link rel="stylesheet" href="https://unpkg.com/sortablejs@latest/Sortable.min.css">
    <style>
        .list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .list li {
            padding: 10px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            margin-bottom: 5px;
            cursor: grab;
        }
    </style>
</head>
<body>
    <ul class="list" id="sortable-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>

    <script src="https://unpkg.com/sortablejs@latest/Sortable.min.js"></script>
    <script>
        const el = document.getElementById('sortable-list');
        const sortable = Sortable.create(el, {
            animation: 150,
            ghostClass: 'sortable-ghost'
        });
    </script>
</body>
</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 Between Lists</title>
    <link rel="stylesheet" href="https://unpkg.com/sortablejs@latest/Sortable.min.css">
    <style>
        .list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .list li {
            padding: 10px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            margin-bottom: 5px;
            cursor: grab;
        }
    </style>
</head>
<body>
    <h3>List 1</h3>
    <ul class="list" id="list-1">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <h3>List 2</h3>
    <ul class="list" id="list-2">
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>

    <script src="https://unpkg.com/sortablejs@latest/Sortable.min.js"></script>
    <script>
        const list1 = document.getElementById('list-1');
        const list2 = document.getElementById('list-2');

        const sortable1 = Sortable.create(list1, {
            group: 'shared',
            animation: 150,
            ghostClass: 'sortable-ghost'
        });

        const sortable2 = Sortable.create(list2, {
            group: 'shared',
            animation: 150,
            ghostClass: 'sortable-ghost'
        });
    </script>
</body>
</html>

这里的关键是 group: 'shared'，它让两个列表共享同一个组，这样就可以互相拖拽了。试试看，把一个列表的项拖到另一个列表，看看效果。

踩坑提醒：这三点一定注意

在使用拖拽库的过程中，我遇到了一些坑点，这里提醒一下：

事件冲突：如果你的页面中有其他事件（如点击事件），可能会和拖拽事件冲突。建议在初始化拖拽库时，检查是否有其他事件处理器，并适当处理。
性能问题：如果列表项很多，拖拽时可能会有性能问题。可以考虑使用虚拟滚动技术（如 React 的 react-window）来优化性能。
移动端支持：默认情况下，拖拽库可能对移动端支持不够好。可以通过添加 touchstart 和 touchmove 事件来增强移动端的支持。

以上是我个人在使用拖拽库时的一些经验总结，希望对你有帮助。

拓展用法：自定义拖拽行为

有时候我们需要更复杂的拖拽行为，比如拖拽时显示提示信息，或者拖拽到特定位置时触发某些操作。这些都可以通过自定义事件来实现。

举个例子，我们可以在拖拽时显示一个提示框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Drag and Drop Behavior</title>
    <link rel="stylesheet" href="https://unpkg.com/sortablejs@latest/Sortable.min.css">
    <style>
        .list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .list li {
            padding: 10px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            margin-bottom: 5px;
            cursor: grab;
        }
        #tooltip {
            position: absolute;
            background: #000;
            color: #fff;
            padding: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="tooltip">Drop here!</div>
    <ul class="list" id="sortable-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>

    <script src="https://unpkg.com/sortablejs@latest/Sortable.min.js"></script>
    <script>
        const el = document.getElementById('sortable-list');
        const tooltip = document.getElementById('tooltip');

        const sortable = Sortable.create(el, {
            animation: 150,
            ghostClass: 'sortable-ghost',
            onMove: (event) => {
                const { target, related } = event;
                if (related) {
                    tooltip.style.display = 'block';
                    tooltip.style.left = ${related.offsetLeft + related.offsetWidth / 2 - tooltip.offsetWidth / 2}px;
                    tooltip.style.top = ${related.offsetTop - tooltip.offsetHeight - 10}px;
                } else {
                    tooltip.style.display = 'none';
                }
                return true;
            },
            onEnd: () => {
                tooltip.style.display = 'none';
            }
        });
    </script>
</body>
</html>

这段代码在拖拽时显示了一个提示框，提示用户可以将项放到某个位置。你可以根据实际需求修改提示内容和样式。

结尾

以上是我个人对拖拽库的完整讲解，有更优的实现方式欢迎评论区交流。这个技巧的拓展用法还有很多，后续会继续分享这类博客。希望对你有帮助！

HTML5拖放API JavaScript拖拽功能前端交互实现拖拽库使用指南用户体验优化

本文章不代表JZTHEME立场，仅为作者个人观点 / 研究心得 / 经验分享，旨在交流探讨，供读者参考。

发表评论

暂无评论