Drag and Drop not working

Coding
1

URL of experiment: https://gitlab.pavlovia.org/jfeng/speech-project

Description of the problem: Hi, I have been debugging this experiment for a while but can’t seem to get it to work. For my experiment, the second routine, I want to implement a drag and drop thing, where there are like a few texts on the left side and the participants have to drag each to their corresponding boxes on the right. But everything works fine locally on Psychopy, but when I moved to Pavlovia, there are no errors, but nothing is moving when I tried to click to drag the text boxes. Any help is appreciated!

2

@Jane, this is probably related to a known issue with online text components, where the “contains” method is not working - see:

A workaround may be to add a transparent shape behind each text component, and link the text position to the shape position, so that when the mouse moves the shape, the text position is also updated.

3

Thank you so much for the reply! I was also having trouble to make a transparent box. I used the polygon component in Psychopy, but once I uploaded the experiment, the box turns black instead. I don’t theres a transparent option for polygon component at least. Do you have any suggestion what kind of component I should use to work around this issue?

4

@Jane, you could set the shape to have the same fill color as the screen background, so it looks transparent ( I left the line color as white to demonstrate). Then you could use:

if polygon.contains(mouse) and mouse.getPressed()[0] == 1:
    polygon.pos = mouse.getPos()
    text.pos = polygon.pos

Here is an online example
https://run.pavlovia.org/dvbridges/test_mousemove/

5

Thank you for the advice! I think I am so close, but I tried your suggestion and perform clicks on the polygon instead. But now it is giving me an error that says piece.contains is not a function, and piece is just an element of the polygon array.

6

I wrote a drag and drop routine last year and realised that I had to code whether an item was moving or not, to avoid a) the mouse falling off the edge of the object because it couldn’t keep up and b) the mouse picking up a different object when they overlapped. Here is the key part of my Each Frame code

moved = 0

#Is one of the objects already moving? If so, keep it moving so long as a mouse button is being pressed.
if moving > -1:
    if mouse.isPressedIn(pic2[moving], buttons=[0]):
        memlocs[moving] = mouse.getPos()
        moved = 1
    elif mouse.getPressed()[0] > 0:
        memlocs[moving] = mouse.getPos()
        moved = 1
    else:
        moving = -1

#If a button is pressed but nothing is currently moving, start moving a new object if the mouse is on it.
for Idx in range(nimages-1,-1,-1):
    pic2[Idx].pos = memlocs[Idx]
    if mouse.isPressedIn(pic2[Idx], buttons=[0]) and moved == 0:
        memlocs[Idx] = mouse.getPos()
        moved = 1
        moving= Idx

for Idx in range(nimages):
    pic2[Idx].draw()
1 Like
7

@Jane, here is a reduced version of your task with parts deleted to focus on the drag and drop - it required some modification of the movePicked function code, and a bit of the Each Frame code logic. Also, you will need to define a fillColor of your shapes for the online task, as the default non-fill is black. If you use grey, the same as the background, it looks transparent, but is not. The code works online as well, but it is modified, so best not to use the auto-translate on this code, or at least make a note of it.

On another note, you have a form component in your task. Form components are not currently supported online, so you will need to create your own version using multiple sliders and text components.

Test2_DB.psyexp (46.5 KB)

8

@dvbridges @wakecarter Thank you so much for replying and all the help. It is finally up and running now!

1 Like