Click & drag isn't working


I’m trying to write some code to move the position of an ImageStim (called gradient) based on if the mouse is pressed in to simulate a click and drag effect. Currently, the code I’ve written doesn’t do anything, and I can’t figure out why. Any help in diagnosing the issue would be greatly appreciated!

At the beginning of each routine, I’ve defined arrays to store the mouse position:

xtravel = [mouse.getPos()[0]]
ytravel = [mouse.getPos()[1]]

Then at each frame, I’ve calculated the distanced moved, and tried to apply the difference to the ImageStim position (which in turn is defined by two variables called x_gradient and y_gradient):

 xdiff = xtravel[-1] - xtravel[-2]
 ydiff = ytravel[-1] - ytravel[-2]
 if mouse.isPressedIn(gradient):
     x_gradient = x_gradient + xdiff
     y_gradient = y_gradient + ydiff


Hi There,

It might be of interest for you to check out the demo in builder “Demos >Experiments > DragNDrop”

To set something to be the location of the mouse you just need to say component.setPos(mouse.getPos())

Hope that helps,

I used dragAndDrop from the demos as an example when I was writing my code, but I don’t want to make the ImageStim.pos = mouse.getPos, because I don’t want the ImageStim to “jump” to position wherever the mouse is. I’m trying to make it look like a smooth transition, as if the participant can grab any part of the ImageStim and drag it around.

For whatever reason, the click & drag code works on different ImageStims, just not the one I’ve specified.

When the mouse is clicked in the image you could save the offset (difference between mouse coordinates and image coordinates) and continue to add that to the image coordinates during the drag.

That’s what I’ve tried to do with the code for xdiff and ydiff, but I think my issue is coming from the fact that I can’t “click” the gradient ImageStim. For some reason the code works on other stimuli, but not that one - thinking maybe it’s an issue of what order elements are in builder.

You could put an invisible polygon behind the gradient and use that to control the position of both.