Drag and Drop

[richardmac]

When you have an image, you can put the line "grab me" into on mouseDown and clicking on the image makes it draggable. COOL!

But say you have an image that is the number 0. And you want very little kids to be able to drag it around, but if they click (on computer) or touch (on iOS) in the middle of the 0, it doesn't register. You have to click or touch on a solid part of the image.

Is there a way to make the non-solid parts of the image clickable? I know I can do this with a button object, but is there a way to do it with an image? If not, I can work around it. But it never hurts to ask.

[jmburnod]

Hi RichardMac,

I found one way and you can grab an img under an other with no solide part
Look at the cd script of the stack in attachment.

Best regards

Jean-Marc

[richardmac]

Thanks, Jean-Marc! That definitely gives me something to go on.

[NoN']

Good evening Richardmac,

here's another way to achieve this result, which I added the possibility to choose the width of the clickable area around the image.
Of course, opaque and transparent image are recognized.

Here I show you the basic script for the method, but you'll find the full version in the "Image qui glisse" stack.

Code: Select all

on mousedown
   repeat with i = 1 to the number of images
      put the rectangle of image i into lerect
      subtract 10 from item 1 of lerect
      subtract 10 from item 2 of lerect
      add 10 to item 3 of lerect
      add 10 to item 4 of lerect
      if the mouseloc is within lerect then
         put item 1 of the mouseloc - item 1 of lerect into difX
         put item 2 of the mouseloc - item 2 of lerect into difY
         put item 3 of lerect - item 1 of the mouseloc into difX2
         put item 4 of lerect - item 2 of the mouseloc into difY2
         repeat while the mouse is down
            set the rectangle of image i to ((item 1 of the mouseloc)-difX)+10,((item 2 of the mouseloc)-difY)+10,((item 1 of the mouseloc)+difX2)-10,((item 2 of the mouseloc)+difY2)-10
         end repeat
      end if
   end repeat
end mousedown

And this is the link for the example stack :

http://rg75.free.fr/downloads/Image_qui_glisse.livecode

Best regards

Renaud