Trouble getting draggable text components to work online via Pavlovia

OS: Mac OS Sequoia
PsychoPy version: 2024.2.2
Standard Standalone Installation? y
URL of experiment: generation [PsychoPy]
Do you want it to also run locally? no
What are you trying to achieve?: Allow users to drag text components into on-screen boxes.
What did you try to make it work?: Set text components to ‘draggable’ via builder. This worked when running the task locally via psychopy, but it does not seem to work in my online task. I do not receive an error message, it’s just that when I attempt to drag the text components they remain fixed to their location. All text components that I want users to be able to drag are included as “Clickable stimuli”, and their position is set to “Set every frame”.

Other relevant post: Transfering JavaScript experiment to online PsychoPy - #3 by ilkekav

If their position is “set every frame”, then I’d expect their position to be reset to whatever value is in that box every frame - hence what you’re seeing. If you choose “constant” instead, then its position is just set once at the beginning and then won’t override the position setting when it’s being dragged.

Thanks for getting back to me, Todd! After making that change, the draggable text components are still fixed in their positions. I should have provided this before, but here is the relevant JS code:

Begin experiment

#possible initial positions of draggable stimuli
pos_pool = [[0, (- 0.1)], [0, (- 0.15)], [0, (- 0.2)], [0, (- 0.25)]];

Begin routine

#draggable text components
terms = [term1, term2, term3, term4];

#polygons fixed in “end positions” where participants should drag stimuli
responses = [resp1, resp2, resp3];

#shuffle initial positions and assign draggable stimuli to them
util.shuffle(pos_pool);
for (var term, _pj_c = 0, _pj_a = util.range(terms.length), _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
term = _pj_a[_pj_c];
terms[term].pos = pos_pool[term];
}

Each frame

#loop through each “end position” to check whether a draggable stimulus is in it. If so, change the border color of the “end position” polygon to green, otherwise keep it black
for (var resp, _pj_c = 0, _pj_a = util.range(responses.length), _pj_b = _pj_a.length; (_pj_c < _pj_b); _pj_c += 1) {
resp = _pj_a[_pj_c];
for (var term, _pj_f = 0, _pj_d = terms, _pj_e = _pj_d.length; (_pj_f < _pj_e); _pj_f += 1) {
term = _pj_d[_pj_f];
if (responses[resp].contains(term)) {
responses[resp].lineColor = “green”;
break;
}
}
}

I ended up editing code from demos/Drag and drop:

In builder, I actually had to uncheck “Draggable?” from each of the components that I want to drag (in my code, “terms”). Relevant JS code:

#Begin experiment
movePicked = function(picked, mouse, grabbed) {
if (grabbed != ‘undefined’ && mouse.getPressed()[0] === 1) {
grabbed.pos = mouse.getPos();
return grabbed
} else {
for (let piece of picked) {
if (piece.contains(mouse) && mouse.getPressed()[0] === 1 && grabbed === ‘undefined’){
piece.pos = mouse.getPos();
return piece;
}
}
return ‘undefined’
}
}

#Begin routine
terms = [term1, term2, term3, term4];
responses = [resp1, resp2, resp3, resp4];
picked = ;
movingPiece = null;

#Each frame
for (let term of terms) {
if (term.contains(mouse) && mouse.getPressed()[0] === 1) {
picked.push(term)
}
}

movingPiece = movePicked(picked, mouse, movingPiece)