如何在Vue中拖动元素的实时位置信息？

Question

我在Vue组件中有一个draggle元素，并且在data函数中声明了数据

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

}

我将position绑定到元素

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

但是我发现拖动元素时，绑定数据position没有更新，问题是如何获取元素的实时位置信息？
有人可以给我一些线索吗？

Answer 1

您正在尝试将对象分配给position CSS属性。这行不通； position必须是一个字符串，其值类似于常规CSS中的relative，absolute，fixed等。

尝试以下方法：

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

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

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