我封装了一个可拖拽的 Tree 组件（ Vue），并发布到了 NPM

[shuirong1997]

Github : https://github.com/shuiRong/vue-drag-tree

DEMO: https://shuirong.github.io/vuedragtree/#/

---

有需求才有动力

一开始在新项目里用的 Tree 组件是 Element 的，但踩到坑了：Tree 节点的填加 /删除无法反映到 data 里，这个影响就比较大了。然后我通过一些奇技淫巧让节点的改变反映到了 data 里，虽然有点消耗性能（用了深克隆），但勉强算是解决了问题。

然后随着项目的进展，需要 Tree 节点可拖拽......

本着 能用开源项目就不自己写 的原则，我就去 Gayhub 上找适合的项目了。但很不幸运，虽然找到了很多不错的拖拽项目，但都不是我想要的。

无奈，只能自己写了。

快速了学习了 HTML5 的拖拽特性后，发现尤雨溪写了一个树形视图，正好能借鉴下。两者一结合，项目就成了。

嘿嘿

---

预览

---

快速开发

如果你决定了要做一件事，那就尽可能地快点。比如做一个项目，注释，文档什么乱七八糟的都可以后来再加上，尽早写出来个 Version 1.0 和一个能看的 DEMO 再说。

为什么呢？

因为夜长梦多，时间久了什么事都可能发生。尽管对于 Tree 组件这种项目来说，时机并没有那么重要（比较重要的：项目质量，需求的满足度），但你也应该有这样的意识。

说些废话，项目无关，可以不看：

该做选择的时侯就要果断，“犹犹豫豫，顾忌很多”会让你大概率错失良机。或许你会说，难道不该考虑“×××”“×××”“×××”的情况吗？应该考虑，做选择时就应该考虑到所有相关可能出现的情况。
但是，你考虑的太久了！
个人觉得考虑问题不应该带入情绪，它只会把你的注意力带到次要矛盾那里，而不是主要的。完全这样思考问题，我还做不到，但在努力做的更好。

"当断不断，反受其乱"，最新看<<中国历朝通俗演义>>，感悟到的。

---

上传 NPM

关于"Vue 组件如何上传到 NPM，供他人使用“，我一开始受到了一些相关博客的误导，大概就是webpack把项目打包成 JS 文件，然后在package.json的 main导出该 JS 文件。（或许这种方法可以吧，而是我没搞定）

我参考了很多文章和项目的代码，仍旧不能成功地在其他项目中引入。

最终，我灵光一闪，想到：为何不直接在main里直接导出 Vue 组件（.vue 文件）呢？

成功！

// 在项目根目录下登录 npm。首先，你需要有个 npm 帐号
npm login
// ...根据提示输入用户名，密码
// ...上传。以后每次代码更新后都可以用这条命令重新上传。记得上传前更新下版本号。
npm publish 

比较意外的是，上传了一天就有 112 次 downloads 了......看来，有这样需求的人还挺多呢。 （补充：得知这些下载量基本都来自于镜像...-_-）

[iTakeo]

Firefox 有 bug

[learnshare]

相信我，112 次 downloads 都是第三方镜像的同步

[pwcong]

相信我，112 次 downloads 都是第三方镜像的同步

[caniuse]

相信我，112 次 downloads 都是第三方镜像的同

[chairuosen]

其实拖拽更多的不是交换，而是单纯把某项提前

[frankynwa]

心路历程写的很详细，赞一个。

[shuirong1997]

@iTakeo 多谢反馈，看看怎么回事。（猜测是拖拽事件的问题...）

@caniuse 少了个”步“。（蛤蛤）

@chairuosen 那我这个算是拖拽高配版？（ XD ）

[SourceMan]

你的 commit message，我宁愿你统一用 Update。。。。

[chairuosen]

@shuirong1997 ...低配。。。n 项，想把最后一项放到第一个，要拖 n-1 次。

[shuirong1997]

@chairuosen 怎么会呢？ 同层级的最后一个可以和第一个直接交换的。 不同层级的也可以一次拖拽交换的

[chairuosen]

@shuirong1997 1234567，交换后是 7234561 啊，我想要 7123456

[shuirong1997]

@chairuosen 也是，没考虑到这种情况。感谢反馈，下次更新加上....XD