关于拖拽插件murri.js的使用总结——iframe拖拽卡顿问题

做一个教务系统的界面，需要用到拖拽功能，要求可以拖拽到任意位置，支持自适应用户体验度高等

在网上找了很多类似插件，对比后决定使用murri.js

这款插件没有中文文档，github上有英文介绍和丰富的案例，所以做起来还是比较顺手的

首先放一个已完成的界面：

首页

murri的案例中展示了很多种类的拖拽，大家可以根据自己的需要选择使用

我这里使用的是比较基础的拖拽，没有排序功能等

但是中间遇到一个问题：每个拖拽的块中其实是一个单独的iframe页面，在拖拽一个块经过另一个块的时候会出现卡顿的问题，当时在网上搜了很多资料，貌似是因为当鼠标点击到iframe中时，iframe需要时间去处理相关的事件，并且两个iframe交错时，也会造成卡顿，所以无法从根源上去解决这个问题

避免卡顿方法：

1、将每个可拖拽块的上方添加内边距，缩小iframe的高度，使murri的触发区域固定在iframe之外，iframe中murri不生效。

2、在鼠标拖着块移动时，将改iframe的display设置为none，从节点当中去除，此时拖拽的只是一个div，在鼠标移开后，再将此iframe设置为block，添加回节点当中，这样就避免了两个块重叠时造成的卡顿问题。

另，可使用localstorage存储拖拽后的位置和右侧折叠按钮展开隐藏菜单，设置每个块的显示隐藏。