※ 需求是从设备列表中拖动设备放到区域中
页面分上下两部分，上部分用 swiper 来展示区域块，一屏两行三列，更多的区域通过左右滑动来查看
下部分的设备列表用分页的形式展示
拖动依旧是老套路使用鼠标按下、鼠标移动和鼠标抬起事件
事先准备一个遮罩层，区域块的 z-index 要比遮罩层高，这样拖放设备的时候区域块就有了高亮
鼠标按下时根据当前设备和鼠标的坐标，动态创建一个 div id为 sign，并注册鼠标移动事件，让 sign 跟着鼠标移动
这样就有了拖拽的效果，同时也为区域块注册鼠标进入事件，这样就知道鼠标移动到了哪个区域块
由于 sign 的遮挡，鼠标进入区域时不会触发鼠标进入事件
注册鼠标抬起，抬起时删除 sign ，鼠标下所在的区域块触发鼠标进入事件，这样就知道哪个设备到了哪个区域，为哪个区域添加 div 以表示设备已添加到该区域
有个问题是鼠标移动太快(疯狂来回移动时)，sign 的移动有延迟，跟不上鼠标移动速度，没了 sign 的遮挡，会多次触发区域的鼠标进入事件，可以设置 sign 的伪元素 ::after，伪元素要足够大，这样无论鼠标移动多快，都不会超出 sign 的遮挡范围
※ 页面内有可切换的1、4、9、16画面的视频，每个视频位置可随意拖动更改
使用了基于 vue 的 vuedraggable 插件实现
另外页面最右侧有设备列表，也要实现拖拽到播放区进行播放，因为播放区视频和设备列表不是同一个 v-for 渲染的，所以插件可能不管用
这次使用了了 h5 的拖放事件