CODEWITHSUNDEEP
javascriptcssvue.js
Sergey Kritskiy
Sergey Kritskiy

Reputation: 2269

Change object color with mouse drag

I'd like to have several color boxes and change color of a clicked box on mouse drag. Example with one box:

enter image description here

Problem is, I have no idea how to approach this. I tried obvious mousemove after mousedown but drag stops when I move outside my box.

Should I create a temporary transparent object and use it to detect drag? Or is there a better/easier solution? Just for reference, I'm using Vue.js for my app.

Upvotes: 2

Views: 407

Answers (1)

Sergey Kritskiy
Sergey Kritskiy

Reputation: 2269

So on the original div I put @mousedown="$el.pressed = true" @mouseup="$el.pressed = false" and I made another div with Vue.js v-if attribute that's shown if 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

Thanks for suggestion, don't know why didn't I try this before asking.

Upvotes: 2

Related Questions