javascript - 使用鼠标拖动更改对象颜色

Question

我想要几个颜色框，并在鼠标拖动时改变点击框的颜色。一个盒子的例子:

问题是，我不知道如何处理这个问题。我在 mousedown 之后尝试了明显的 mousemove，但是当我移出我的盒子时拖动停止了。

我应该创建一个临时透明对象并使用它来检测拖动吗？或者有更好/更简单的解决方案吗？仅供引用，我在我的应用程序中使用 Vue.js。

Answer 1

所以在原来的 div 上我放了 @mousedown="$el.pressed = true"@mouseup="$el.pressed = false" 然后我用 Vue.js 做了另一个 div v-if 在 el.pressed == true 时显示的属性:

<div 
    v-if="$el.pressed"
    @mouseup="$el.pressed = false"
    @mouseout="$el.pressed = false"
    @mousemove="colorCoordinate"
    class="transparentItem"> </div>

谢谢你的建议，不知道为什么我在问之前不试试这个。