动态添加数据时,删除前一个索引的数据时,后一个索引的对应的VueDragResize的y会变成前一个索引对应的VueDragResize的y。

This issue has been tracked since 2022-04-11.

在data中设置数据

copydata:[
        { vw: 320, vh: 24, top: 45, left: 216, color: '#000', fontSize: 24, content: '文案内容1', },
        { vw: 300, vh: 24, top: 259, left: 25, color: '#000', fontSize: 24, content: '文案内容2', },
        { vw: 300, vh: 24, top: 700, left: 500, color: '#000', fontSize: 24, content: '文案内容3', },
      ],

在VueDragResize中

<VueDragResize v-for="(item,index) in copydata" :key="index" :w="item.vw" :h="item.vh" :x='item.left'
        :y='item.top' :minh="20" :minw="220" :parentW="750" :parentH="750" :parentLimitation="true" :z="9"
        @resizestop="(newRect)=>copyResize(newRect, index)" @dragstop="(newRect)=>copyResize(newRect, index)">
        <p class="wrap"
          :style="{height:item.vh +'px',color:item.color,fontSize:item.fontSize+'px',lineHeight:item.fontSize +'px'}">
          {{ item.content}}</p>
      </VueDragResize>

在methods中 index对应的是copydata中元素相对应的索引

del (index) {
     this.copydata.splice(index, 1)
   }

点击del(1)时,文案内容3的top自动变成文案内容2的top,即文案内容3在文案内容2删除后自动移动到文案内容2的水平位置

wangmuqi wrote this answer on 2022-06-14

你好,请问你有解决这个问题吗?我也遇到了同样的问题

marc111 wrote this answer on 2022-07-11

循环渲染那里的key不要用index,用一个自定义的id,好像就可以解决这个问题了

More Details About Repo
Owner Name kirillmurashov
Repo Name vue-drag-resize
Full Name kirillmurashov/vue-drag-resize
Language JavaScript
Created Date 2018-04-26
Updated Date 2022-11-25
Star Count 1764
Watcher Count 24
Fork Count 291
Issue Count 89

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date