bevacqua/dragula 开源项目安装与使用教程

bevacqua/dragula 开源项目安装与使用教程

dragula:ok_hand: Drag and drop so simple it hurts项目地址:https://gitcode.com/gh_mirrors/dr/dragula

---

1. 项目目录结构及介绍

bevacqua/dragula 是一个轻量级的 JavaScript 库，用于实现拖放功能，特别适合于对容器内的元素进行重新排序。以下是项目的基本目录结构以及关键文件的简要说明：

dragula/
├── dist/                  # 生产环境使用的压缩代码
│   ├── dragula.js         # 主库文件，适用于非模块化环境
│   └── dragula.min.js     # 压缩后的主库文件
├── src/                   # 源代码目录
│   └── dragula.js         # 核心逻辑所在
├── examples/              # 示例应用目录，展示了不同的应用场景
├── package.json           # npm 包管理文件，记录依赖和脚本命令
├── README.md              # 项目说明文档
└── LICENSE                # 许可证文件

• dist: 存放编译后可以直接在生产环境中使用的JavaScript文件。
• src: 包含原始源代码，dragula.js是核心源码文件。
• examples: 提供多个示例，帮助快速理解如何在不同场景下使用dragula。
• package.json: 定义了项目的npm依赖、脚本命令等，对于开发和构建流程至关重要。

---

2. 项目的启动文件介绍

由于dragula本身不提供一个直接的“启动”文件（它是一个库而不是一个应用程序），其“启动”主要指集成到你的项目中并运行。通常，集成步骤涉及以下几个方面：

• 通过npm安装:

  npm install dragula --save
  

或使用CDN引入到HTML中。

• 引入dragula到你的代码中:

  • 如果你是通过npm安装的，可以这样引入：

    import dragula from 'dragula';
    

  • 使用 script 标签则添加对应的js引用即可。

• 初始化dragula: 在你的应用准备就绪时，调用dragula函数创建一个新的实例。

  var drake = dragula([document.getElementById('bin')]);
  

---

3. 项目的配置文件介绍

Dragula的核心配置并不通过单独的配置文件完成，而是通过传递参数给dragula()函数来定制行为。以下是一些基本配置选项的例子：

var drake = dragula({
  containers: [document.getElementById('bin1'), document.getElementById('bin2')],
  moves: function(el, container, handle) {
    // 自定义拖动条件
    return handle.classList.contains('draggable');
  },
  accepts: function(el, target, source, sibling) {
    // 控制元素能否被放置在目标容器
  },
  removeOnSpill: true,
  mirrorContainer: document.body,
});

每个参数都是可选的，允许开发者根据需要调整拖拽行为。具体的配置项及其作用可以在项目的README.md中有详细描述。

---

以上就是关于bevacqua/dragula项目的目录结构、启动方法和配置文件的基础介绍。希望对你理解和使用这个库有所帮助。

dragula:ok_hand: Drag and drop so simple it hurts项目地址:https://gitcode.com/gh_mirrors/dr/dragula