--- highlight: a11y-dark --- > 拖拽库github地址：https://github.com/bpuns/easy-dnd > > 拖拽库说明文档：https://bpuns.github.io/easy-dnd-docs/ # 前言一年前，我接到一个需求，需要开发一个低代码平台，调研了下市面上适用于React的拖拽库，本人都感觉使用起来过于复杂，并且体积都挺大的，我就想用原生的拖拽Api，但是原生Api在复杂场景下（无限嵌套，嵌套规则复杂），是不可用的，如果想了解具体遇到的问题，可以看 [巨详细！帮你踩坑HTML5拖拽api（下）](https://juejin.cn/post/7250041527070081082) 这篇文章。因此，我就想基于 [Drag and Drop](https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations) api 封装的一套可以应用与复杂场景下的拖拽库并且这个库最好不要和任何的前端框架绑定，这样方便移植和扩展，因为是自己封装的，因此可以掌握所有实现细节，开发过程中如果遇到了性能瓶颈，也能最快的找到解决方案，而且我也没完整的发布过一个开源库，正好学习下整个过程 # 拖拽库实现思路 ## 拖拽上下文页面中可能会有很多可以拖拽的区域，并且拖拽区域之间互不影响，那么就需要为每个拖拽区域创建一个上下文，那么就可以提供一个方法，用于上下文的创建，为了到时候方便扩展，可以传一个配置项作为参数。 ```ts interface ProviderConfig { } /** * 创建拖拽作用域下的基本数据 * @param {*} config 配置项 * @returns */ function createProvider(config?: ProviderConfig): Context; ``` ## 拖拽类型在现实生活中，我们之所以知道一个物品可以放到另外一个物品中，比如食物剩余的包装袋需要放到垃圾桶中，电脑需要放到电脑包里。所以抽到代码中，需要给可以拖拽的dom元素添加一个**类型**，给需要放置的元素设置允许放置的类型有哪些 ```ts // 创建拖拽对象 const drag = useDrag({ config: { type: '类型' } }) // 创建放置对象 const drop = useDrop({ config: { acceptType: [ '类型' ] } }) ``` ## canDrop 光有类型不够，还需要给Drop添加一个方法，判断当前是否允许放置，比如当前Drop元素内部可能只能放一个元素 ```ts const drop = useDrop({ config: { canDrop: () => true | false } }) ``` ## Drag api设计 Drag Api的事件需要和h5事件保持一致 ```ts const drag = useDrag({ config: { type: '类型', context }, dragStart(){ console.log('开始拖拽') }, drag(){ console.log('拖拽中') }, dragEnd(){ console.log('结束拖拽') } }) ``` ## Drop api设计 Drop Api的事件需要和h5事件保持一致 ```ts const drop = useDrop({ config: { context, // 判断是否允许拖拽 canDrop: () => true | false, // 使用Set替换数组 acceptType: new Set([ '类型' ]), }, dragEnter(){ console.log('拖拽元素进入') }, dragOver(){ console.log('拖拽元素在当前元素范围内移动') }, dragLeave(){ console.log('拖拽元素离开') }, drop(){ console.log('拖拽元素放置') } }) ``` 试试下面的代码片段 [jcode](https://code.juejin.cn/pen/7290172464838770699) # Vue 与 React 支持因为在Vue和React中都有上下文的概念，那就好办了，提供个组件包裹需要拖拽的元素，用于传递上下文 - Vue ```vue ``` - React ```tsx import { DndProvider } from 'easy-dnd/react' function Example1() { return ( ) } ``` 因为拖拽和放置都需要作用在dom上，那么可以Drag与Drop都可以提供个方法，用于dom的绑定 - Vue ```vue ``` - React ```tsx import { useDrag } from 'easy-dnd/react' function A() { // 创建拖拽实例 const drag = useDrag(() => ({ config: { type: 'A' }, // 拖拽开始的回调 dragStart: () => { console.log('A 开始拖拽') }, // 拖拽结束的回调 dragEnd: () => { console.log('A 结束拖拽') } })) return (

盒子A

) } ``` # 编写打包脚本随便找个打包工具，我这个库使用的是rollup ```js import { rollup } from 'rollup' import typescript from 'rollup-plugin-typescript2' import { terser } from 'rollup-plugin-terser' rollup({ // 入口配置 input: entry, // 输出配置 output: {}, // 插件配置 plugins: [ // 代码压缩 terser({ ie8: false, compress: true, format: { quote_style: 1 } }), // typescript支持 typescript() ], // 配置要排除哪些文件， external: [] }) ``` 详细配置文件可以看[这里](https://github.com/bpuns/easy-dnd/blob/master/scripts/dev.mjs) 如果是React开发者，可以试试下面的代码片段（掘金的代码片段好像没办法创建多个Vue文件） [jcode](https://code.juejin.cn/pen/7290170796332220427) # 使用vuePress编写Doc并发布到GitHub Pages上一个开源库，一定需要一个说明文档，那么这里我使用的是 [VuePress](https://v2.vuepress.vuejs.org/zh/reference/cli.html)，官方的介绍如下 > VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 [Markdown在新窗口打开](https://zh.wikipedia.org/wiki/Markdown) 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们文档编写完成之后，如果你有自己的服务器，可以把静态资源部署到自己的服务器上，像我这样的白嫖党，可以选择发布到 GitHub Pages 上，可以看[Github的官方文档](https://pages.github.com/)来部署你的说明文档部署完成的效果就是下面这样啦 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/557b8ca56da1416fb498204b5ebe166f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2560&h=1529&s=332990&e=png&b=ffffff) # 编写使用demo 打包脚本和文档有了之后，就需要准备demo了，因为有些人是不会看文档的，直接看demo基本上就可以很快的把一个库的使用方法学会，因此我准备了在纯原生环境下使用，在Vue下使用，在React下使用的代码示例，点击这里 [查看](https://github.com/bpuns/easy-dnd/tree/master/examples) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ce1e1bbddc84e26b9f4e956ae66bb29~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=479&h=328&s=15843&e=png&b=ffffff) # npm发布我选择再编写了个js脚本，帮我把package.json，README.md文件全部拷贝到打包文件夹下，这样我就不用编写 .npmignore文件了 - scripts/build.js ```js import { join } from 'node:path' import process from 'node:process' import { rollup } from 'rollup' ...... async function buildPackage(_package) { console.log(`${name}：开始构建`) // 构建代码 ...... console.log(`${name}：构建结束`) } ; (async function () { // 清空原有的输出路径 await fs.emptyDir(BUILD_PATH) // 打包 await Promise.allSettled(packages.map(buildPackage)) // 复制需要提交到npm上的配置文件 copyNpmConfig() })() function copyNpmConfig() { // 复制package.json const desJson = JSON.parse(fs.readFileSync(join(PROJECT_PATH, 'package.json'), 'utf-8')) const newPackageJson = { name: desJson.name, version: desJson.version, keywords: desJson.keywords, author: desJson.author, repository: desJson.repository } fs.writeFileSync(join(BUILD_PATH, 'package.json'), JSON.stringify(newPackageJson, null, 2)) console.log('package.json完成') // 复制README.md fs.copyFileSync( join(PROJECT_PATH, 'README.md'), join(BUILD_PATH, 'README.md') ) console.log('复制README.md完成') } ``` 最后就是调用推送命令发布。当然，如果你实在懒的话，也可以编写node脚本帮你提交 ```shell $ npm publish ``` # 最后这个拖拽库是真实可用的，并不是整活，它已经用在了我私人项目中，并且已经使用了快1年多的时间，目前已经趋于稳定，欢迎大家使用并提出宝贵意见！！ # 后续展望目前拖拽没有动画效果，并且还有基于这个库横向/纵向/网格拖拽的组件可以直接使用，后续可以加上