如何在Vue中激活可拖动元素的位置信息？

Question

我在Vue组件中有一个拖拽元素，我在data函数中声明了数据

data() {
  return {
    position: {"top":"116px","left":"238px"}
  }

}

我将position绑定到元素

<div :style="position"></div>

但我发现当我拖动元素时，绑定数据position没有更新，问题是如何获得元素的实时位置信息？

有谁能给我点线索吗？

Answer 1

您正在尝试将一个对象分配给position CSS属性。这是行不通的；position必须是一个带有relative、absolute、fixed等值的字符串，就像在常规的CSS中一样。

试着这样做：

data() {
  return {
    style: {
      position: 'absolute',
      left: '238px',
      top: '116px',
    }
  }
}

<div :style="style"></div>

拖动元素时，只需相应地更新this.style.left和this.style.top即可。