做一个教务系统的界面，需要用到拖拽功能，要求可以拖拽到任意位置，支持自适应用户体验度高等
在网上找了很多类似插件，对比后决定使用murri.js
这款插件没有中文文档，github上有英文介绍和丰富的案例，所以做起来还是比较顺手的
首先放一个已完成的界面：
首页
murri的案例中展示了很多种类的拖拽，大家可以根据自己的需要选择使用
我这里使用的是比较基础的拖拽，没有排序功能等
但是中间遇到一个问题：每个拖拽的块中其实是一个单独的iframe页面，在拖拽一个块经过另一个块的时候会出现卡顿的问题，当时在网上搜了很多资料，貌似是因为当鼠标点击到iframe中时，iframe需要时间去处理相关的事件，并且两个iframe交错时，也会造成卡顿，所以无法从根源上去解决这个问题
避免卡顿方法：
1、将每个可拖拽块的上方添加内边距，缩小iframe的高度，使murri的触发区域固定在iframe之外，iframe中murri不生效。
2、在鼠标拖着块移动时，将改iframe的display设置为none，从节点当中去除，此时拖拽的只是一个div，在鼠标移开后，再将此iframe设置为block，添加回节点当中，这样就避免了两个块重叠时造成的卡顿问题。
另，可使用localstorage存储拖拽后的位置和右侧折叠按钮展开隐藏菜单，设置每个块的显示隐藏。
