Page 1 of 1

Drag and Drop

Posted: Sat Jan 21, 2012 3:22 pm
by 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.

Re: Drag and Drop

Posted: Sat Jan 21, 2012 7:50 pm
by jmburnod
Hi RichardMac,

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

Best regards

Jean-Marc

Re: Drag and Drop

Posted: Sat Jan 21, 2012 11:17 pm
by richardmac
Thanks, Jean-Marc! That definitely gives me something to go on.

Re: Drag and Drop

Posted: Sun Mar 11, 2012 7:32 pm
by 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