Draggable 项目教程

Draggable 项目教程

draggableThe JavaScript Drag & Drop library your grandparents warned you about.项目地址:https://gitcode.com/gh_mirrors/dr/draggable

1. 项目的目录结构及介绍

Draggable 项目的目录结构如下：

draggable/
├── examples/
├── src/
│   ├── Draggable/
│   ├── Plugins/
│   ├── Sensors/
│   ├── Sortable/
│   ├── Swappable/
│   ├── Utils/
│   └── index.js
├── tests/
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── package.json
└── yarn.lock

目录介绍：

• examples/: 包含一些示例代码，展示如何使用 Draggable 库。
• src/: 项目的源代码目录，包含 Draggable 的核心功能和插件。
  • Draggable/: 核心拖拽功能。
  • Plugins/: 各种插件，如可排序、可交换等。
  • Sensors/: 传感器，用于检测鼠标、触摸等事件。
  • Sortable/: 排序功能。
  • Swappable/: 交换功能。
  • Utils/: 工具函数。
  • index.js: 入口文件。
• tests/: 测试代码目录。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• CONTRIBUTING.md: 贡献指南。
• LICENSE.md: 许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• yarn.lock: Yarn 锁定文件。

2. 项目的启动文件介绍

Draggable 项目的启动文件是 src/index.js。这个文件是整个项目的入口点，负责导出 Draggable 库的主要功能和插件。

// src/index.js
import Draggable from './Draggable';
import Sortable from './Sortable';
import Swappable from './Swappable';
import Plugins from './Plugins';
import Sensors from './Sensors';
import * as Utils from './Utils';

export {
  Draggable,
  Sortable,
  Swappable,
  Plugins,
  Sensors,
  Utils,
};

启动文件介绍：

• Draggable: 核心拖拽功能。
• Sortable: 排序功能。
• Swappable: 交换功能。
• Plugins: 各种插件。
• Sensors: 传感器。
• Utils: 工具函数。

3. 项目的配置文件介绍

Draggable 项目包含多个配置文件，用于不同的配置需求。

.babelrc

Babel 配置文件，用于转译 JavaScript 代码。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

.editorconfig

编辑器配置文件，用于统一代码风格。

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.eslintrc

ESLint 配置文件，用于代码检查。

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true
  }
}

package.json

项目依赖和脚本配置文件。

{
  "name": "draggable",
  "version": "1.0.0",
  "description": "A modular drag and drop library",
  "main": "src/index.js",
  "scripts

draggableThe JavaScript Drag & Drop library your grandparents warned you about.项目地址:https://gitcode.com/gh_mirrors/dr/draggable