使用vue-grid-layout完成桌面拖拽布局功能(更改拖拽变换位置方式)

之前最原始的效果是当你移动一个box时 即使你没松开鼠标 每一个被你移动中碰撞到的box都会发生改变 这可能不是我们想要的

  1. 我们通过创建一个historyLayout 拿来记录我们上一步的布局
  2. 在watchitem()里比较 如果不是当前操作的box 使其的位置保持不变
  3. 在moved()中调用一个调整位置的函数toChangePosition()
  4. 使其可以达到 两两调换的效果 或者 将其插入指定位置 其他box会自动补位的效果

接下来的代码就是 自动补位的效果 简单的写了个(2*5)的demo 若有错误欢迎指正







你可能感兴趣的:(使用vue-grid-layout完成桌面拖拽布局功能(更改拖拽变换位置方式))