Click and drag code doesn't work

Online experiments
1

Hi there,

I need to implement click and drag (i.e. people click onto an image and drag the image to any place on the screen). I used the method posted on the forum and here’s the JS code. But somehow this doesn’t work with no error message. Could anyone help to see what is not working?

Thanks so much!

if not drag_in_progress and mouse.isPressedIn(img_ball):
    drag_in_progress = True
if True in mouse.getPressed():
    if drag_in_progress:
        mp = mouse.getPos()
        if mp[0] <= x_right and mp[0] >= x_left and mp[1] <= y_top and mp[1]>=y_bottom:
            img_ball.pos = mouse.getPos()
else:
    drag_in_progress = False
if mouse.isPressedIn(submit):
    continueRoutine = False

This auto-JS translates to:


var _pj;
function _pj_snippets(container) {
    function in_es6(left, right) {
        if (((right instanceof Array) || ((typeof right) === "string"))) {
            return (right.indexOf(left) > (- 1));
        } else {
            if (((right instanceof Map) || (right instanceof Set) || (right instanceof WeakMap) || (right instanceof WeakSet))) {
                return right.has(left);
            } else {
                return (left in right);
            }
        }
    }
    container["in_es6"] = in_es6;
    return container;
}
_pj = {};
_pj_snippets(_pj);
if (((! drag_in_progress) && mouse.isPressedIn(img_ball))) {
    drag_in_progress = true;
}
if (_pj.in_es6(true, mouse.getPressed())) {
    if (drag_in_progress) {
        mp = mouse.getPos();
        if (((((mp[0] <= x_right) && (mp[0] >= x_left)) && (mp[1] <= y_top)) && (mp[1] >= y_bottom))) {
            img_ball.pos = mouse.getPos();
        }
    }
} else {
    drag_in_progress = false;
}
if (mouse.isPressedIn(submit)) {
    continueRoutine = false;
}
2

Maybe this demo repository helps you to find a working solution:

The JS Part seems really similar.

Otherwise, it might be helpful to upload a minimal example of your Psy-Exp (only drag/drop part, with one example image maybe) file to investigate the error here in the forum.

2 Likes
3

A very simple version of the drag and drop was shown to me in this thread (so hopefully you can adapt it for your needs):

The key python part (from the demo above also) is

if mousePressedIn(draggedImage):
  draggedImage.pos = mouse.get Pos()
4

Thanks so much! This solves the issue!

5

Glad to help as I spent a long time getting my head around it last year