前沿介绍

之前vue移动拖拽库使用的是vue-draggable，但扩展性偏弱。而dnd在这方面有优势，需要做这个功能的小伙伴，个人建议优先选择dnd。不过dnd有学习成本。此文章就是希望能降低vue3 dnd的学习成本。

上手思路

因为学习思路有问题，个人上手dnd花费了不少时间，望大家不要重蹈覆辙。官方文档的入门教程是有点整蛊的，说是教程，实则只是一堆api的解释。嚼起来费劲，又没啥用。

个人推荐上手思路：

直接跟着我下面的dnd示例做，跑一遍dnd的流程。dnd的代码量其实很少的，做一遍你就知道dnd是怎么运行的，其实就已经是上手了。

然后根据自己需要的业务，去找dnd的官方示例，官方示例有5大模块，每个模块也就三五示例。里面基本涵盖了dnd能实现的常见功能。找到类似自己的业务的示例后，下载官方源码，自己根据官方文档的api，改造示例代码即可。

我先自吹一波，这一套上手思路，上手速度快，业务实现速度也是杠杠的。大家如果觉得有用，给我文章点个赞哈。话不多说，扬帆起航。

创建一个dnd流程

实现目标：将一个拖拽源拖拽到容器中

创建一个可以被拖拽的拖拽源(Drag)

javascript复制代码