draggable image

[marksmithhfx]

Here is the scenario.

I would like to click on a control, select it, create a draggable image of that control, move to a new location, release the mouse and create a copy of the control at the new location.

This is the same behaviour as, for example, clicking on a field icon in the tools palette, dragging it to the card, releasing the mouse button and creating a copy of the control (field) at the new location.

Any suggestions for getting started with this?

Thanks
Mark

[richmond62]

I think you'll have to do things in a different order:

1. Click on the image, at which point it clones.

2. Drag the clone to where you want.
-

-

[dunbarx]

Hi.

Make a new card with a few different style buttons. Put this in the card script:

Code: Select all

on mouseDown
   wait 3
   if the optionKey is down and "card" is not in the target then
      clone the target
      set the loc of last btn to the mouseLoc
   end if
end mouseDown

on mouseMove
   if the optionKey is down and "card" is not in the target then set the loc of last button to the mouseLoc
end mouseMove

Now this only works for buttons, because I cannot spend a lot of time right now. But you now have homework.

Craig

[jmburnod]

Hi Friends,
A other way with a snapshot of target control

stClickSnapMove..zip

(1.23 KiB) Downloaded 104 times

Kind regards
Jean-Marc

[PBH]

A while ago, I used a sample stack by Peter Haworth on the LiveCode Share site, it explains pretty well how to do exactly what you are asking. It works on the same stack or between stacks.

Link here: https://livecodeshare.runrev.com/stack/614/DragExample

Paul

[marksmithhfx]

Thanks all. As Craig said, "now I have some homework"

I'll get back to you when I've had a chance to take a look, but looks like a lot of good suggestions.

Thanks,
Mark

[dunbarx]

Homework. Yes.

And don't think you will get an "A" if all you do is change "last button" to "last control".

On the other hand, LiveCode gets an "A" for even having such an adorable and powerful keyword at all.

Craig

[marksmithhfx]

I think you'll have to do things in a different order:

1. Click on the image, at which point it clones.

2. Drag the clone to where you want.
-
SShot 2022-02-15 at 17.43.36.png
-

Thanks Richmond. I ended up doing something quite similar. After posting my query, I remembered that in the IDE tools palette, if you double click on a control it will create one in the window. I just mimicked that behavior which is very easy to do. Next, I allowed the user to click on the object and used "grab me" to move it around. However, I have been busy looking at some of the other suggestions as well. More to follow...

[marksmithhfx]

Homework. Yes.

And don't think you will get an "A" if all you do is change "last button" to "last control".

On the other hand, LiveCode gets an "A" for even having such an adorable and powerful keyword at all.

Craig

Hahaha, I would never think of doing such a thing But, I digress... the clone keyword is awesome. Thanks for the suggestion (above), but I did not want to add an additional key stroke in the mix, so that wasn't the best fit for the UI I was looking for.

[marksmithhfx]

Hi Friends,
A other way with a snapshot of target control
stClickSnapMove..zip
Kind regards
Jean-Marc

Hi Jean-Marc, I think that is very similar to the approach Peter Haworth created (suggested by Paul). I'll have to look closely to see what differences there are between your two approaches but a quick glance indicates (a) his approach is quite complicated (any simplification would be an improvement) and (b) it actually works exactly like the LC IDE tools palette in terms of copying a control to another card. Mind you, it's really difficult for me to follow what he is doing he has so many objects in play (an image, a drag image (which is hidden), and an actual control that gets replicated) with front scripts and back scripts controlling it all. As I said, quite a complicated approach but there must have been a reason he wrote it that way.

In your example I think i was able to figure out almost everything you were doing but there was one thing I could not figure out... how did you get the script "on mouseUp, deImgMU, end mouseUp" into img 1?

Mark

[dunbarx]

You do not have to add another key to the mix if you do not want to. I just did that to make it simple for me to work the thing with confidence. But then
there are decisions to be made about how to exit the action in the first place.
Craig

[dunbarx]

Just change the script slightly:

Code: Select all

on mouseDown
   if  "card" is not in the target then
      clone the target
      set the loc of last control to the mouseLoc
   end if
end mouseDown

on mouseMove
  if  "card" is not in the target and the mouse is down
  then set the loc of last control to the mouseLoc
end mouseMove

Simple,

Craig

[marksmithhfx]

In your example I think i was able to figure out almost everything you were doing but there was one thing I could not figure out... how did you get the script "on mouseUp, deImgMU, end mouseUp" into img 1?

Mark

Hi J-M, ignore that. I found the "hidden" image that was img 1 with the code in it. Problem solved!!

Mark

[marksmithhfx]

Just change the script slightly:

Code: Select all

on mouseDown
   if  "card" is not in the target then
      clone the target
      set the loc of last control to the mouseLoc
   end if
end mouseDown

on mouseMove
  if  "card" is not in the target and the mouse is down
  then set the loc of last control to the mouseLoc
end mouseMove

Simple,

Craig

Thanks Craig (and everyone). That was inspirational. I've been pouring over all of your examples and taking inspiration from many places. I've not yet delved deeply into Peter's example but now that I have the following solution working I mean to (if only because I want to know how he made it possible to drag objects across card boundaries. I tried copying one of my fields to his card, but when it hit the card boundary it disappears. This may be a limitation of the 'clone' command).

So, thank you. I think this works pretty decently, and is also pretty simple. There are no behaviours and no hidden fields. All of the code is in the original controls (mouseDown handler) and card script (mouseMove handler). Once you let go of the mouse button it drops a new control at that location. I guess the easiest way to describe it is, this works very similar to the LC tools palette (not completely, but pretty close). However, it does not, as yet, copy controls across card boundaries but that is left as an exercise for another day.

Is the code the same in every control? Not completely. In some cases I disabled autoHilite or enabled lockText in the original control to make it easier to select, but then reversed this in the dropped control so it maintained the original parameter settings. All of the original controls have their LockLoc set to true but I disable that in the clone. It's all commented in the code.

This was a great collaboration (I didn't know half this stuff when I started) and I really enjoyed doing it.

Todo: In addition to crossing card boundaries, if you don't move the cloned control a certain distance it really shouldn't make a copy (the copy might cover the original control). Easy to fix but also left for another day.

Mark

[dunbarx]

Mark.

Whoa. Both handlers are in the card script. I said this in the very first post. I would not even propose that every control have it locally. I am not a barbarian.

And yes, some preparation is required to make this as universal as possible. For example, a field has to be locked, or it will not send "mouseDown" messages. Perhaps you can use a "mouseEnter" handler to read its current sate, and if unlocked lock it, and "mouseLeave" to restore it. to its original value, That sort of thing.

That handler would also be in the card script. right?

As for dragging across cards, have to play around with that...

Craig