Drag and drop and arrange graphics on a page

[kaveh1000]

Hi all

I am looking to do the following:

• Drag and drop a set of images (JPG or PNG say) onto a LiveCode page or control
• Write a caption for each image that is attached to it somehow
• Drag images using interface to order them
• Images keep captions with them as they are dragged
• At any time I should be able to add or delete images, and edit captions

Any pointers as to how I do this? Which handlers do I use? Are there any stacks around to build on?
Thanks.

Regards
Kaveh

[Klaus]

Hi Kaveh,

I am looking to do the following:
• Drag and drop a set of images (JPG or PNG say) onto a LiveCode page or control

Add this handler to the card script:

Code: Select all

on dragenter
   set the dragaction to "copy"
end dragenter

then you need to add a DRAGDROP Handler where you can check the dropped file(s)
and put them into an image template, see below.

I am looking to do the following:
• Write a caption for each image that is attached to it somehow
• Drag images using interface to order them
• Images keep captions with them as they are dragged

Create a group with an empty image object and a locked field below it.
Then "on dragdrop" you can CLONE that group and load the image into its image object.
No idea how the caption could get into LC?

Give the group a little script:

Code: Select all

on mousedown
  grab me
end mousedown

You could add a MOUSEUP handler, too, to maybe align the groups etc.

• At any time I should be able to add or delete images, and edit captions

Should be doable!
Add a little script to the field:

Code: Select all

on mousedoubleup
  set the locktext of me to FALSE
  select the text of me
end mousedoubleup

on closefield
    set the locktext of me to TRUE
end closefield

• At any time I should be able to add or delete images,

Sure, no problem, just delete that group/CLONE a new one...

Well, that's it basically


Best

Klaus

[kaveh1000]

Thank you Klaus for the details. So much new stuff for me! Pressure is on me now and I will upload the result.

[Klaus]

Okie Dokie, please ask when questions arise, I have a lot of answers!

[kaveh1000]

Very basic question, Klaus. Why can I not drag and drop the attached jpg to the big button in the stack attached? Pls see script of button.

[Klaus]

"set the dragaction..." has to go into the DRAGENTER Handler!

This works:

Code: Select all

on dragDrop
   beep
   ## Just in case the user drops more than one files, you know how they are! :-D
   set the filename of image "image template" to line 1 of the dragData["files"]
end dragDrop

on dragenter
   set the dragAction to "copy"
   set the borderColor of the target to "red"
end dragenter

on dragLeave
  set the bordercolor of the target to empty
end dragLeave

[kaveh1000]

Amazing. Thank you!

I'll be back....

[Klaus]

Not that I wrote it in my first posting...