通过列表数据渲染多个可拖动box，给每一个增加一个删除按钮，点击删除出现错误

[john-ehsure]

版本2.4.4
删除使用的最常规的 splice
删除前的样子

删除后

下方de的块自动上移了
通过修改代码消除当前问题

moveHorizontally(val) {
      const [deltaX, deltaY] = snapToGrid(this.grid, val, this.top, this.scale)
      console.log(deltaX, deltaY)
      const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft)
      this.left = val  // 插件中原来取得是left  改成val就不再有问题了
      this.right = this.parentWidth - this.width - left
    },
    moveVertically(val) {
      const [deltaX, deltaY] = snapToGrid(this.grid, this.left, val, this.scale)
      console.log(deltaX, deltaY)
      const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop)
      this.top = val   // 插件中原来取得是top  改成val就不再有问题了
      this.bottom = this.parentHeight - this.height - top
    },

忘楼主帮忙解答一下，原来为什么取计算出来的top和left，改成取val就不再有当前问题了

[murph-1999]

我的需求和您的配图差不多，拖拽到容器中生成模块，容器样式也和您的一致，格子之间有间隔，也出现了这个问题。

这可能与你设置的 key 值有关。当使用 splice 后删除某个数据后，如果 key 设置了数组下标 index 或者未设置，导致重新渲染（diff算法），将触发 vdr 组件内部 x, y, w, h 这四个属性的侦听，对应着源码中的 moveHorizontally()，moveVertically()，changeWidth()，changeHeight() 这四个函数的触发；这四个函数都会调用 snapToGrid，仔细看看 snapToGrid 中四舍五入的实现就明白了。
同时可能存在width 和 height 也会被更新的情况，因此只更改top，left 是不够的，this.right 和 this.bottom 同样被改变，这会影响到 width 和 height 的计算。

解决：
方法1. 将 key 值设置为唯一标识（推荐)
方法2. 当触发这四个属性的变更时，对 this.left, this.top, this.width, this.height 直接不作修改（不建议对源码进行改动）