元素不摆正自己的位置下鼠标

Question

我层楼高简单的拖放功能：

<div class="i-plane"> 
    <div class='i-interact' @mousedown='handleDown' :style='position'></div> 
</div> 

<script> 
    data: { 
    field: { 
     x: 0, 
     y: 0 
    } 
    position: { 
     transform: 'translate(' + this.field.x + 'px,' + this.field.y + 'px) rotate(' + this.rotate + 'deg)' 
    } 
    }, 

    methods: { 
    handleMove() { 
     this.field.x = e.clientX 
     this.field.y = e.clientY 
    } 
    } 
</scrip> 

我想e.clientX和e.clientY会把i-interact光标下。但是，没有，这是地方一路下滑：

什么是放置i-interact元素完全光标下的正确方法是什么？

编辑：我尝试这样做：

// this.$el = <div class="i-interact"> 
this.field.x = e.clientX - this.$el.parentElement.offsetLeft 
this.field.x = e.clientX - this.$el.parentElement.offsetTop 

但i-interact元素仍然显示在底部：

Answer 1

动态分配的风格，你必须有一个字符串position变量。

你可以看到下面的例子来看看这个：

HTML：

<div id="demo"> 
    <span :style="colorStyle"> {{age}} </span> 
</div> 

JS：

var demo = new Vue({ 
    el: '#demo', 
    data: function(){ 
     return { 
     age: '132', 
     colorStyle: 'color: red;' 
     }; 
    } 
}) 

看到工作小提琴here。

---

我看到使用的是其他数据变量，它是不可能的内部数据变量，可以更好地使用所计算的属性为这样的情况下，请参见下面的示例代码：

var demo = new Vue({ 
    el: '#demo', 
    data: function(){ 
     return { 
     age: '132', 
     color: 'red' 
     }; 
    }, 
    computed: { 
     colorStyle: function() { 
     return 'color: ' + this.color + ';' 
     } 
    } 
}) 

更新提琴手here。