用鼠标拖动更改对象颜色

Question

我希望有几个颜色框，并在鼠标拖动时更改单击框的颜色。一个框的示例：

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

我应该创建一个临时透明对象并使用它来检测拖动吗？还是有更好/更容易的解决方案？仅供参考，我正在为我的应用程序使用Vue.js。

Answer 1

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

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

感谢您的建议，不知道为什么我在问之前没试过。