正在为无限词典制作单词思维导图功能，实现无限单词导图，无限思维画布。目前制作到第三步，实现节点移动与编辑：

节点移动与编辑

Details

第一步，搜索 github。

一个是比较完善的，基于普通dom，用canvas做小预览图，值得借鉴。而另一个是vue-mindmap，用的是svg结合foreignobject嵌套普通dom，虽然功能不完整、在移动端没有惯性滑动且卡顿，但css外观上更符合预期，于是基于其h5产物，改造。

第二步，简化

简化是为了理清dom结构，理解代码原理。

保留两三个节点即可。连线是svg的q指令，即指令两点连线，然后用另一个点，或数个点控制曲线弯曲。节点旁边还有竖线关联一些细节。

第三步，古法手搓html

h5其实很简单 ——

<!DOCTYPE html>
<html><head><meta name="description" content="MDict JS"><meta name="robots" content="noindex"><meta charset="utf-8"><meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, maximum-scale=10"><style>.mindmap-svg {height: 100%;width: 100%;}.mindmap-svg:focus {outline: none;}.mindmap-node>a, .mindmap-node>wordnode {background: #f5f5f5;border-radius: 10px;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);color: #212121;display: inline-block;font-family: 'Raleway';font-size: 22px;margin: 0 auto;padding: 15px;text-align: center;text-decoration: none;transition: background-color .2s, color .2s ease-out;}.mindmap-node>a[href]:hover {background-color: #f57c00;color: #fff;cursor: pointer;}.mindmap-node--editable>a {pointer-events: none;}.mindmap-subnode-group {align-items: center;border-left: 4px solid #9e9e9e;display: flex;margin-left: 15px;padding: 5px;}.mindmap-subnode-group a {color: #212121;font-family: 'Raleway';font-size: 16px;padding: 2px 5px;}.mindmap-connection {fill: transparent;stroke: #9e9e9e;stroke-dasharray: 10px 4px;stroke-width: 3px;}.mindmap-emoji {height: 24px;vertical-align: bottom;width: 24px;}.reddit-emoji {border-radius: 50%;}mark{background: orange;color: black;}html,body{padding:0;margin:0;}body{overflow: scroll;}foreignObject { overflow: visible; }.items-container{font-size: 12px;color: rgb(255, 255, 255);display: flex;flex-grow: 1;user-select:none;}.statusbar-item{color: rgb(255, 255, 255);display: inline-block;line-height: 22px;height: 100%;vertical-align: top;max-width: 40vw;padding-top:5px;padding-bottom:5px;}.statusbar-item>a{line-height: 22px;text-decoration: none;cursor: pointer;display: flex;height: 100%;padding: 0 5px;white-space: pre;align-items: center;text-overflow: ellipsis;overflow: hidden;outline-width: 0;margin-right: 3px;margin-left: 3px;color: #000;}.statusbar-item>a>span{text-align: center;font-size: 14px;padding-top:10px;padding-bottom:10px;}</style><!--script src='https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js'> </script-->
</head><body style='background:#fff'><svg id="map" class="mindmap-svg" viewBox="0 0 1500 2500"><g transform="translate(0,0) scale(1)"><!--path class="mindmap-connection" d="M 487 -259 Q 443 241 , 402 540"></path><path class="mindmap-connection" d="M 402 540 Q 298 590 , 154 639"></path><path class="mindmap-connection" d="M 154 639 Q 135 696 , 183 753"></path><path class="mindmap-connection" d="M 955 417 Q 717 362 , 746 138"></path--><foreignObject class="mindmap-node mindmap-node--editable" width="125" height="55" x="426" y="14"><wordnode><a id="node-undefined">python<img class="mindmap-emoji" title="wiki" ></a><title></title></wordnode></foreignObject><foreignObject class="mindmap-node mindmap-node--editable" width="1" height="1" x="0" y="0"><wordnode><div style="whitespace:nowrap;">basicsasdsa asdasdsadddddasdsadads</div><video preload="none" src='https://www.runoob.com/try/demo_source/movie.mp4' controls></wordnode></foreignObject><!--foreignObject class="mindmap-subnodes" width="113" height="176" x="546" y="3"><div class="mindmap-subnode-group" style="border-left-color: rgba(255, 189, 10, 1.0)"><a><img class="mindmap-emoji reddit-emoji" title="reddit"></a><div></div></div><div class="mindmap-subnode-group" style="border-left-color: rgba(255, 189, 10, 1.0)"><a>source <img class="mindmap-emoji" title="github"></a><div></div></div><div class="mindmap-subnode-group" style="border-left-color: rgba(255, 189, 10, 1.0)"><a>source <img class="mindmap-emoji" title="github"></a><div></div></div></foreignObject--><path id="location" transform="translate(0,0) scale(1)" d="M0,-7c-3.87,0 -7,3.13 -7,7s3.13,7 7,7 7,-3.13 7,-7 -3.13,-7 -7,-7zM15.65,-1.75c-0.81,-7.3 -6.6,-13.09 -13.9,-13.9L1.75,-19.25h-3.5v3.61C-9.05,-14.84 -14.84,-9.05 -15.65,-1.75L-19.25,-1.75v3.5h3.61c0.81,7.3 6.6,13.09 13.9,13.9L-1.75,19.25h3.5v-3.61c7.3,-0.81 13.09,-6.6 13.9,-13.9L19.25,1.75v-3.5h-3.61zM0,12.25c-6.77,0 -12.25,-5.48 -12.25,-12.25s5.48,-12.25 12.25,-12.25 12.25,5.48 12.25,12.25 -5.48,12.25 -12.25,12.25z"></path><foreignObject id="editbar" class="mindmap-node mindmap-node--editable" width="1" height="1" x="500" y="500" ><wordnode style="transform:scale(1.5);padding-top:0;padding-bottom:0;"><div class="items-container" style="width:auto;"><div class="statusbar-item" id="move"><a tabindex="-1" role="button"  style="cursor:all-scroll"><span class="codicon codicon-bookmark">✥ 移动</span></a></div><div class="statusbar-item" ><a tabindex="-1" role="button"  style=""><span class="codicon codicon-bookmark" id="edit">												


											

【无限思维画布】制作思维导图第三步，节点移动与编辑相关推荐
	

    
								
  1. 思维导图的三招十八式
		
    思维导图的三招十八式  张鄂勇 编著 ISBN978-7-121-14010-5 2012年1月出版 定价:49.00元 16开 396页 宣传语:会降龙十八掌,才混得到九袋弟子.         懂 ...
    
		
    2. 
						
  2. 《思维导图的三招十八式》读书笔记
		
    1.书籍信息 --------------------------------------------------------- 书籍名称:思维导图的三招十八式 作者:张鄂勇 出版社:电子工业出版社  ...
    
		
    3. 
						
  3. 思维导图培训三：思维导图的应用
		
    思维导图培训三:思维导图的应用 在这个商业社会,个人的价值的体现必须放在社会成功的天平上进行衡量! 这就给各类成功人士提供了一个用自己的成功经验赚钱的机会,他们出书或者办班,向听众大讲特讲许许多多成功 ...
    
		
    4. 
						
  4. 思维导图的三招十八式之梳理
		
    说到思维导图的三招十八式,很多人都希望用它来学习思维导图,里面讲解了很多MindManager和MindMapper的使用方法和技巧,不过,撇除这些,思维导图的三招十八式这本书也是蛮厚实的,想要快速了 ...
    
		
    5. 
						
  5. 画思维导图的三招十八式
		
    思维导图在生活中是一种很常见的图表,因为它的实用性所以使用的人越来越多,但是怎么样绘制思维导图却成为了困扰的问题,下面小编给大家分享画思维导图的两种操作方法. 绘制工具:电脑 迅捷画图 操作方法介绍: ...
    
		
    6. 
						
  6. 思维导图PPT七步制作法
		
    如今,基本的办公软件除了Word,就属PPT使用频繁了,ppt是一种具有艺术和美感的表现形式,它用文字.图形.色彩及动画的方式,将需要表达的内容直观.形象地展示给观众,让观众对你要表达的意思印象深刻. ...
    
		
    7. 
						
  7. 好色面试官为小哥们整理的mysql思维导图，可分享xmind等可编辑格式
		
    文章目录 思维导图 mysql存储补充(图片看不清) Page结构 脏页 页内记录维护 内存管理 公众号原文链接 RocketMQ思维导图,不看会后悔哟 Mysql思维导图分享 上面思维导图可 ...
    
		
    8. 
						
  8. JavaScript学习思维导图（三）
		
    这是我在学习JavaScript时做的思维导图,用的wps做的思维导图,导出图片,因为不是会员,所以带有水印,仅供参考,谢谢. 1.JavaScript中的map集合 2.JavaScript中的ES ...
    
		
    9. 
						
  9. [思维导图学习三]  思维导图的应用
		
    在这个商业社会,个人的价值的体现必须放在社会成功的天平上进行衡量! 这就给各类成功人士提供了一个用自己的成功经验赚钱的机会,他们出书或者办班,向听众大讲特讲许许多多成功必需的所谓品质或条件. 那么,我 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 【C++】Google C++编码规范（一）：作用域
		
    2. 
						
  2. （61）分析 KiFindReadyThread 函数 —— 线程优先级
		
    3. 
						
  3. Ember入门指南——教程目录
		
    4. 
						
  4. ECMAScript arguments 对象（摘自W3C）
		
    5. 
						
  5. 深入浅出TensorFlow（二）：TensorFlow解决MNIST问题入门
		
    6. 
						
  6. sql执行组件是灰色的_如何分析SQL执行计划图形组件
		
    7. 
						
  7. 唤醒锁: 检测 Android* 应用中的 No-Sleep（无法进入睡眠）问题
		
    8. 
						
  8. 比对两个数据库中数据表结构异同
		
    9. 
						
  9. hibernate.hbm.xml必须必须配置主键
		
    10. 
						
  10. Python 基础起步 (三)  基础的数据类型，简单运算
		
    11. 
						
  11. java B2B2C springmvc mybatis电子商城系统-分布式配置中心(Spring Cloud Config)
		
    12. 
						
  12. CAN分析仪的特点与功能
		
    13. 
						
  13. java的酒店房间管理系统
		
    14. 
						
  14. java 动态性之反射机制 详解 案例，java架构师技术图谱
		
    15. 
						
  15. oracle同义词问题,ORACLE同义词总结（下）
		
    16. 
						
  16. 创建华为云服务器实验报告,华为云正式发布云端实验室，真正实现云服务实验云上做...
		
    17. 
						
  17. 【写给自己的开发知识树】——知识点
		
    18. 
						
  18. java判断硬盘为固态硬盘_怎么看电脑是不是固态硬盘|查询电脑硬盘是HDD还是SSD的方法－系统城...
		
    19. 
						
  19. 数码照片回执可以自己在网上弄吗？
		
    20. 
						
  20. DEVONthink Pro for Mac(mac文件管理工具)
		
    21. 
		

	


热门文章
	

    
									
  1. 基于thinkphp的卡券回收商城系统
			
    2. 
						
  2. 克隆人与死亡 (转)
			
    3. 
						
  3. PrintWriter类
			
    4. 
						
  4. Linux 常用命令及详细使用方法
			
    5. 
						
  5. 思南民族中学2021年高考成绩查询,思南民族中学2019高考成绩喜报、一本二本上线人数情况...
			
    6. 
						
  6. 干货 | 携程火车票基于因果推断的业务实践
			
    7. 
						
  7. 知识付费系统微信提示用户信息获取失败
			
    8. 
						
  8. 【疑难教程】如何解决推流摄像头推RTMP视频流至EasyDSS视频直播点播平台Chrome浏览器无法播放？
			
    9. 
						
  9. 零基础都能拿捏的七夕浪漫代码，快去表白或去制造惊喜吧
			
    10. 
						
  10. 寻找UI设计灵感：20大电影公司Logo设计欣赏
			
    11.