drag and drop images

[KennyR]

Hi all....on to my next project and new problems! I am curious as to where I might do some reading up on dragging thumbnail images to a graphic and having them display in the graphic. I have been reading up on resizing images to fit the rect of a graphic and that works well for me, but as far as dragging a thumbnail image and detecting when it reaches the graphic I want it displayed in, I am having issues finding any documentation. So to sum it up, I want a scroller on the bottom of a card with thumbnail images that can be dragged to an image placeholder (empty graphic) and displayed there... I seem to find a lot of docs on dragEnter,dragLeave, etc. but that is only for desktop environments...not iOS

Thanks all!

[endernafi]

Hi Kenny,

Here is a simple one:

imageDragDrop.zip

(118.89 KiB) Downloaded 276 times

It took me two hours from scratch.
Seems that not much a programmer I am

Well, if it works for you, that's great.
You could use of AnimationEngine for some nice effects, btw.
If you make any improvements {and it does need many improvements }
then please share your code.
Together, we're smarter!


Cheers,

~ Ender Nafi

[KennyR]

Thank you so much for the example! This is exactly what I was looking for....I will post my script and example when I finish so I can share the love!

[KennyR]

I found the code on this fascinating! I am really still trying to wrap my novice mind around how you banged out this code....I must say, it works great and there are really not that many changes that need to be made to it to make it work for me....but I did make a few changes listed below..

1) I made the image that is displayed in the fld "dragYourImageHere" to stay locked once it is displayed. I found that if the user touched the image again, it moved unexpectedly. So now the image is disabled once it is in the rect of the fld.

2) I put a resize function in the card script to keep the proportions of an image that is port/landscape so the image is not distorted. I cannot take credit for making the algorithm since I read the lesson on http://livecode.byu.edu/functions/functions.php * I'll be making some adjustments and reporting back...thanks again

Code: Select all

local sImageDragged, sThumbnails

on preOpenStack
   setTheCard
end preOpenStack

on setTheCard
   
   /* figure out a better way to reset the thumbnails */
   
   put empty into sImageDragged
   repeat with i=1 to the number of images of me -- reset and store the location properties of thumbnails
      set the width of image i to the cWidth of image i
      set the height of image i to the cHeight of image i
      set the loc of image i to ((the cLocX of image i) & comma & (the cLocY of image i))
      set the innerShadow of image i to false
      set the dropShadow["color"] of image i to "0,0,0"
      
      put the long name of image i into tName
      put the width of image i into sThumbnails[tName]["width"]
      put the height of image i into sThumbnails[tName]["height"]
      put item 1 of the loc of image i into sThumbnails[tName]["locX"]
      put item 2 of the loc of image i into sThumbnails[tName]["locY"]
   end repeat
end setTheCard

on mouseDown
   put the long name of the target into tClickedObject
   repeat for each key tImage in sThumbnails
      put tImage & return after tThumbnails -- retrieve the thumbnails' names
   end repeat
   
   if tClickedObject is among the lines of tThumbnails then-- is the clicked object one of the thumbnails?
      put the long name of image tClickedObject into sImageDragged -- store the long name in a script variable in order to move it
      put the loc of sImageDragged into sOriginalLoc -- if the image wouldn't be dropped into the main area then it'll return to its own place 
      set the dropShadow of sImageDragged to false -- just eye candy :)
      set the layer of sImageDragged to top
      
      set the acceleratedRendering of this stack to true -- a performance tweak
      set the layerMode of sImageDragged to "dynamic" -- again, a performance tweak
   end if
end mouseDown

on mouseMove pX, pY
   if sImageDragged is not empty then
     set the loc of sImageDragged to the mouseLoc
   end if
end mouseMove

on mouseUp
   if sImageDragged is not empty then -- any thumbnail catched?
      if the loc of sImageDragged is within the rect of field "dragYourImageHere" then -- dropped in the main area?
         lock screen for visual effect
         
         /* we are checking if there's a drag&dropped image in the main area already */
         repeat for each key tImage in sThumbnails
            if ((the loc of tImage) is (the loc of field "dragYourImageHere")) then
               put tImage into tOldBigImage
            end if
         end repeat
         if tOldBigImage is not empty then
            set the width of tOldBigImage to 96
            set the height of tOldBigImage to 96
            set the loc of tOldBigImage to the loc of field "dragYourImageHere"
            set the innerShadow of tOldBigImage to false
            set the layer of tOldBigImage to top
         end if
         /* end check */
         # this calls the function FindNewDims...evaluates the image and resizes it
         put the formattedWidth of sImageDragged into nativeWdth
  put the formattedHeight of sImageDragged into nativeHgt
  put the width of fld "dragYourImageHere" into maxWdth
  put the height of fld "dragYourImageHere" into maxHgt
  # here is the function call
  put findNewDims(nativeWdth,nativeHgt,maxWdth,maxHgt) into newDimensions
  set the width of  sImageDragged to item 1 of newDimensions
  set the height of sImageDragged to item 2 of newDimensions
  set the loc of sImageDragged to the loc of fld "dragYourImageHere"
         
         
         
         //set the rect of sImageDragged to the rect of field "dragYourImageHere"
         set the lockLoc of sImageDragged to true
         set the innerShadow["color"] of sImageDragged to "0,0,0" -- just eye candy
         unlock screen with visual effect dissolve fast
         disable sImageDragged
         put empty into sImageDragged
         
         if tOldBigImage is not empty then
            put sThumbnails[tOldBigImage]["locX"] & comma & sThumbnails[tOldBigImage]["locY"] into tOriginalLoc
            set the layerMode of tOldBigImage to "dynamic"
            move tOldBigImage to tOriginalLoc in 161 milliseconds
            set the dropShadow["color"] of tOldBigImage to "0,0,0"
            set the layerMode of tOldBigImage to "static"
            enable tOldBigImage
         end if
         
      else -- not dropped in the main area, let's return it to its own place
         put sThumbnails[sImageDragged]["locX"] & comma & sThumbnails[sImageDragged]["locY"] into tOriginalLoc
         move sImageDragged to tOriginalLoc in 161 milliseconds
         set the dropShadow["color"] of sImageDragged to "0,0,0"
         set the layerMode of sImageDragged to "static"
         set the acceleratedRendering of this stack to false
         
         put empty into sImageDragged
      end if
   end if
end mouseUp

on mouseRelease
   mouseUp
end mouseRelease

# This is the resize function to keep the proportions of the image from skewing 
function findNewDims oldW,oldH,maxW,maxH
  # check to see if width is different from the max width
  if oldW <> maxW then
    put maxW / oldW into resizeFactor
    put oldW * resizeFactor into newW
    put oldH * resizeFactor into newH
  end if
  # now check to see if the height is still too large
  if newH > maxH then
    put maxH / newH into resizeFactor
    put newW * resizeFactor into newW
    put newH * resizeFactor into newH
  end if
  # return the new dimensions
  return newW,newH
end findNewDims

[endernafi]

Hi Kenny,

I found that if the user touched the image again, it moved unexpectedly.

Sorry for that
Your solution is great, an alternative might be like below.
In the mouseDown handler,
changing this:

Code: Select all

repeat for each key tImage in sThumbnails
         put tImage & return after tThumbnails -- retrieve the thumbnails' names
end repeat

to this:

Code: Select all

repeat for each key tImage in sThumbnails
      if not((the loc of tImage) is (the loc of field "dragYourImageHere")) then
         put tImage & return after tThumbnails -- retrieve the thumbnails' names
      end if
end repeat

I put a resize function in the card script to keep the proportions of an image that is port/landscape so the image is not distorted.

Nice touch there, it works like a clock



Best,

~ Ender Nafi

[endernafi]

Hi all,

Here is a slightly improved version:

imageDragDropRevised.zip

(120.67 KiB) Downloaded 231 times

Improvements:
* The big image can be detached
* Thumbnails can be swapped places
* A stretch-shrink effect instead of dissolve effect
* Fix bug of erratic movement of images when clicked
* Fix bug of occasional misplacement of the big image

Issues:
* The stretch-shrink effect's performance in mobile is terrible, absolutely terrible

Any insights to fix this one is greatly appreciated.
How can it be change in order to achieve a smoother stretch-shrink effect?

Aside that, anyone can use it freely anywhere, if it works for you.
But please share your improvements...



Best,

~ Ender Nafi

[KennyR]

I really like how you made the images switch place! I see what you mean about the shrink problem....I must say though, I prefer the dissolve effect anyhow....Good update and thank you for taking the time to improve your script...

[jmburnod]

Hi Ender,

Nice stack. Thank for share it
I played with it and saw a little mistake:

• mousedown on a preview
• drag the preview to an other preview (i know that is not the goal )
• do a click
If I drag a preview to an other preview and I do a click
sImageDragged = empty and

Code: Select all

         set the dropShadow["color"] of sImageDragged to "0,0,0"

don't work.

Best regards

Jean-Marc

[endernafi]

Hi Jean-Marc,

I followed your recipe and saw that mistake.
It's interesting, 'cause there is an if clause encapsulating that code to prevent such a bug.

Code: Select all

on mouseUp
  if sImageDragged is not empty then
    ...
      set the dropShadow["color"] of sImageDragged to "0,0,0"
    ...
  end if
end mouseUp

I wonder how that click bypass the if statement;
I'll dig deep to find out what's going on


Thanks for the heads up...


Best,

~ Ender Nafi

[endernafi]

Hi Jean-Marc,

I think I found the problem.
During the movement of the image, the code continues to execute.
And since the movement lasts 161 milliseconds,
the engine reaches to the line put empty into sImageDragged meanwhile.
And of course the next line after the move command causes the error.
Replacing all the move commands like below fixes the problem { I hope }
move tImage -> move tImage without waiting

Could you please try this and see if you encounter the same problem; whenever you have some spare time?

imageDragDrop_Re-Revised.zip

(120.61 KiB) Downloaded 239 times

Thanks,


~ Ender Nafi

[jmburnod]

Hi Ender,

The mistake is solved
(I noticed the move without waiting)
Best regards
Jean-Marc

[endernafi]

Thanks Jean-Marc...