Smooth-dnd 开源项目教程
smooth-dnddrag and drop library for javascript项目地址:https://gitcode.com/gh_mirrors/smo/smooth-dnd
1. 项目的目录结构及介绍
Smooth-dnd 是一个用于实现平滑拖放功能的 JavaScript 库。以下是其主要目录结构及其介绍:
smooth-dnd/
├── dist/
│ ├── smooth-dnd.js
│ └── smooth-dnd.min.js
├── examples/
│ ├── basic.html
│ ├── container-options.html
│ └── ...
├── src/
│ ├── smooth-dnd.js
│ ├── utils.js
│ └── ...
├── package.json
├── README.md
└── ...
- dist/: 包含编译后的 JavaScript 文件,包括
smooth-dnd.js
和压缩版本smooth-dnd.min.js
。 - examples/: 包含多个示例文件,展示如何使用 Smooth-dnd 库。
- src/: 包含源代码文件,包括主库文件
smooth-dnd.js
和其他辅助文件。 - package.json: 项目的配置文件,包含依赖项、脚本等信息。
- README.md: 项目说明文档。
2. 项目的启动文件介绍
Smooth-dnd 项目的启动文件主要是 src/smooth-dnd.js
。这个文件包含了库的核心逻辑和功能实现。开发者可以通过引入这个文件来使用 Smooth-dnd 库。
import { smoothDnD, dropHandlers } from 'smooth-dnd';
3. 项目的配置文件介绍
Smooth-dnd 项目的配置文件是 package.json
。这个文件包含了项目的基本信息、依赖项、脚本命令等。以下是 package.json
的部分内容:
{
"name": "smooth-dnd",
"version": "0.10.1",
"description": "A fast and lightweight drag&drop, sortable library for React with many configuration options covering many d&d scenarios.",
"main": "dist/smooth-dnd.js",
"scripts": {
"build": "rollup -c",
"watch": "rollup -c -w",
"test": "jest"
},
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"babel-jest": "^24.8.0",
"jest": "^24.8.0",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-terser": "^5.1.1"
}
}
- name: 项目名称。
- version: 项目版本。
- description: 项目描述。
- main: 主入口文件。
- scripts: 包含可执行的脚本命令,如
build
、watch
和test
。 - dependencies: 项目运行所需的依赖项。
- devDependencies: 开发环境所需的依赖项。
通过这些配置,开发者可以轻松地构建、测试和运行 Smooth-dnd 项目。
smooth-dnddrag and drop library for javascript项目地址:https://gitcode.com/gh_mirrors/smo/smooth-dnd