Page 1 of 1
Drag and drop and arrange graphics on a page
Posted: Thu Nov 18, 2021 4:13 pm
by 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
Re: Drag and drop and arrange graphics on a page
Posted: Thu Nov 18, 2021 4:32 pm
by Klaus
Hi Kaveh,
kaveh1000 wrote: ↑Thu Nov 18, 2021 4:13 pm
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.
kaveh1000 wrote: ↑Thu Nov 18, 2021 4:13 pm
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.
kaveh1000 wrote: ↑Thu Nov 18, 2021 4:13 pm
• 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
kaveh1000 wrote: ↑Thu Nov 18, 2021 4:13 pm
• 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
Re: Drag and drop and arrange graphics on a page
Posted: Thu Nov 18, 2021 6:44 pm
by kaveh1000
Thank you Klaus for the details. So much new stuff for me! Pressure is on me now and I will upload the result.
Re: Drag and drop and arrange graphics on a page
Posted: Thu Nov 18, 2021 9:24 pm
by Klaus
Okie Dokie, please ask when questions arise, I have a lot of answers!
Re: Drag and drop and arrange graphics on a page
Posted: Fri Nov 19, 2021 4:00 pm
by 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.
Re: Drag and drop and arrange graphics on a page
Posted: Fri Nov 19, 2021 4:29 pm
by 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
Re: Drag and drop and arrange graphics on a page
Posted: Fri Nov 19, 2021 4:32 pm
by kaveh1000
Amazing. Thank you!
I'll be back....
Re: Drag and drop and arrange graphics on a page
Posted: Fri Nov 19, 2021 4:46 pm
by Klaus
Not that I wrote it in my first posting...
