mouse Drag & Drop

I'm doing some Instagram story-like things, like putting emojis on my processing sketch. I set 84 emojis in 7x12 array and if I click each of emojis, then the emoji should be dragged and dropped. the problem is the code I wrote. The emoji stuck when I click and drag.

void mouseDragged() {

if (155>mouseX && mouseX>100 && 100>mouseY && mouseY>51 == true) { image(emoji, pmouseX, pmouseY); }

---------------------============= I think that range is the issue. The emoji is just stuck in that range. how can I drag and drop images where I want to put on?


  • Answer ✓

    First this: if (155>mouseX && mouseX>100 && 100>mouseY && mouseY>51 == true)

    should be this instead if (155>mouseX && mouseX>100 && 100>mouseY && mouseY>51)

    Pseudo-code next.


        boolean emojiShift=false;
        int mx,my;
        void draw(){
        void mousePressed(){
          if(is hovering over emoji == true)
            emojiShift=true;  //Start dragging
        void mouseReleased(){
            emojiShift=false;  //Dropped!

    You need to complete is hovering over emoji above. One strategy is to use the dist() function. Assuming your imageMode() is CENTER, then the checking would be:

    if( dist(mouseX,mouseY,emojiX,emojiY)<emojiRadius) {...}

    where emojiX and emojiY is the emoji's center position.


  • Answer ✓

    Also in draw I would say image(emoji,mx,my); outside the if

    inside the if in draw say mx=mouseX;my=mouseY;

  • edited April 2018

    @kfrajer @Chrisir

    Thank you guys, it worked!![20180420_162240]

    However, as you can see the picture, the image keeps appearing when I drag. I guess this is because I put <<image(emoji,mouseX,mouseY);>> in draw(). must <<image(emoji,mouseX,mouseY);>>be in draw()?

  • Just use background at start of draw() and display everything after background

  • Answer ✓

    Ideally the emojis are in a grid so you can know their position

    In mousePressed for loop over all emojis to figure out which one was pressed on

    Ideally the emojis are in an array and all mx,my also in an array

  • @Chrisir


  • Answer ✓ that you can drag all

    Displaying would happen in a for loop and the mousePressed function would also have a for loop

Sign In or Register to comment.