用鼠标拖动更改对象颜色

时间:2018-04-06 15:11:27

标签: javascript css vue.js

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

enter image description here

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

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

1 个答案:

答案 0 :(得分:2)

所以在原来的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>

enter image description here

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