jtopo的项目实战（四）

话接上回，继续实现jtopo本身不具有的一些功能，有讲的不对的地方，欢迎大家留言提出，我们一起进步，奥利给，还有，码字不易，如果觉得博主写的不错的欢迎打赏哈！

4.实现拓扑图所有的元素拖动后自动保存

 

这里说的自动保存是将json数据保存到web后端服务器，当然，如果需要也可以保存到本地的。

（如果觉得简单，或者会的童鞋可以跳过了哈）jtopo自带的小例子中，界面有保存按钮，也调用了保存的方法，但是并没有保存，这是因为例子本身的传参是错的，而且，保存函数中也注掉了相应的保存逻辑，当然细心的同学很快就发现了，并且增加保存逻辑后，能够完美的保存拓扑数据，有图有真相：

 

保存方法，入参是url，途中框起来的部分是提交给服务器的代码，例子中是注释掉的，大家可以根据自己的项目想要灵活修改这部分的代码，实现保存逻辑。

好了，保存说完了，怎么能够让拓扑图实时的保存呢？比如拖动一个节点、删除一条连线、移动分组的位置，我们不希望网页弹框来提醒保存，也不想手动点击保存来完成保存，我们想要的结果是拓扑图上的元素移动后自动保存。那么，怎么才能实现自动保存呢？

       自动保存的提前是元素“动”了。那我们是不是可以在元素拖动或移动事件中寻求实现方法呢？好了，不卖关子了，直入正题，首先在 TopologyEditor方法中定义一个节点移动后的回调函数 Nodemove，如下图所示：

 

 

有了回调函数，就可以挂载回调函数的具体实现，在回调函数中，我们可以调用保存接口，来更新当前节点的新坐标，接下来的问题是在哪里触发回调函数，当然是在拖动后的函数，在jtopo-editor.js中有这么一个方法 this.scene.mouseup，从方法名就可以看出，它是完成鼠标弹起后的处理工作的，当然我们移动节点后，鼠标肯定是有弹起动作的，所以这到这个方法就对了，

 

这个方法中有许多的条件分支，我们找到 event.button === 0的分支，这个分支是处理左键松开逻辑的，这里我们需要注意的是鼠标松开后，必须先判断当前选中的节点是否为空，因为我们的业务逻辑是节点实时保存，如果都没有节点了那我们还保存什么啊？ 好了，以下是代码的具体实现：

 

更新节点部分的代码更简单了，先绑定回调事件，再用ajax异步请求服务器：

 

 

好了，拖动节点自动保存的功能实现了，有问题的小伙伴欢迎留言哦~！

 

最后，博主有一个小小的心愿，就是希望大家点一下下方的点赞、分享和收藏，博主希望大家都支持下，后期有好的东西我会继续分享给大家。