Draggable.js 开源项目教程

2026-01-16 10:15:23作者：庞队千Virginia

项目介绍

Draggable.js 是一个模块化的拖放库，由 Shopify 开发并开源。它允许用户快速实现拖放功能，支持快速 DOM 重排序、无障碍标记以及一系列事件处理。Draggable.js 提供了多种功能模块，如 Swappable、Sortable 和 Droppable，以满足不同场景的需求。

项目快速启动

安装

首先，通过 npm 或 yarn 安装 Draggable.js：

npm install @shopify/draggable

或者使用 yarn：

yarn add @shopify/draggable

基本使用

以下是一个简单的示例，展示如何在项目中使用 Draggable.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draggable Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0/lib/draggable.bundle.js"></script>
    <script>
        const containers = document.querySelectorAll('.container');
        const draggable = new Draggable.Draggable(containers, {
            draggable: '.item'
        });

        draggable.on('drag:start', () => console.log('Drag started'));
        draggable.on('drag:move', () => console.log('Drag moving'));
        draggable.on('drag:stop', () => console.log('Drag stopped'));
    </script>
</body>
</html>

应用案例和最佳实践

案例一：任务列表

在任务管理应用中，使用 Draggable.js 可以轻松实现任务项的拖放排序：

<div class="task-list">
    <div class="task">Task 1</div>
    <div class="task">Task 2</div>
    <div class="task">Task 3</div>
</div>

<script>
    const taskList = document.querySelector('.task-list');
    const sortable = new Draggable.Sortable(taskList, {
        draggable: '.task'
    });
</script>

案例二：图片墙

在图片展示应用中，使用 Draggable.js 可以实现图片的拖放和交换：

<div class="photo-wall">
    <img src="photo1.jpg" class="photo">
    <img src="photo2.jpg" class="photo">
    <img src="photo3.jpg" class="photo">
</div>

<script>
    const photoWall = document.querySelector('.photo-wall');
    const swappable = new Draggable.Swappable(photoWall, {
        draggable: '.photo'
    });
</script>

典型生态项目

Vue Draggable

Vue Draggable 是一个基于 Draggable.js 的 Vue 组件，提供了拖放功能并与 Vue 的数据绑定完美结合。

安装

npm install vuedraggable

使用

<template>
    <div>
        <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
            <div v-for="element in myArray" :key="element.id">
                {{element.name}}
            </div>
        </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
    components: {
        draggable
    },
    data() {
        return {
            myArray: [
                { id: 1, name: 'Item 1' },
                { id: 2, name: 'Item 2' },
                { id: 3, name: 'Item 3' }
            ]
        };
    }
};
</script