how to drag a control and drop it to a different place

Hi, everybody!
A problem has puzzled me several days: how do I drag a control, for example, a pushbutton, from one place to another place on a window?

If you mean drag from one window to another, I found that copy/paste works.

Your example kind of confuses the issue, as it has a Action event which is hardcoded to take the click event, so it’s difficult to start the drag. Checkboxes and other controls that are more clickable than are true interface components suffer the same way. But dragging a pushbutton is pretty poor design and poor HID. Maybe you can do it, but I wouldn’t.

A better example is a Canvas, and people do this all the time. ROUGHLY… Add a property called DragStarted. In Canvas.MouseDown set it to true and return true. In MouseDrag, code if DragStarted is true, Left and Top equals ~MouseX and MouseY. In MouseUp, DragStarted=false.

You’ll probably want to optimize this by determining what the X and Y of the mousecoursor is upon MouseDown, so the “pickup” is smooth, and in MouseUp it’s exactly where you want to drop it.

Thanks to Garth. I have tried as you told, but it doesn’t work. In fact, I want to realize the function like this: there is a toolbox panel with several icons in it. I want to drag some icons to the main window, and pull them to their proper positions, and then link them with lines.
But I was hindered at the first step, I cannot drag a icon and pull it to the main window.

There’s a difference between dragging an actual object from one place to another (what I was answering) and doing a typical drag. A typical drag historically is actually NOT dragging the actual object but simply showing you that under the hood some information is being passed.

A good example is when you move a file in the Finder (or Explorer on Windows). The Finder simply shows a representation of what you are dragging but internally it’s just remembering what you dragged. When - or if - you drop it, it makes decisions about what operation you actually ended up specifying. If you drop it on a app, and it accepts that type, it opens the app and passes it location of the contents. If you drop it on a Finder Windows, it mvoes or copies the files, and so on.

Probably in your app you want to simply create a DragItem (look it up in the LR), enter the information about that icon/tool (that means declaring a type on what it represents), and you likely want to create a picture of what you are dragging (it can be exact, or just a representation) and assign it to the DragIcon property of the DragItem. The, probably call the Drag method for that DragItem in the MouseDown event.

Then, you have to make sure what you want to drop it on accepts that type, and then the DropObject for that destination (I suppose it’s a Window) will trigger when you drop it. Then create a new object that represents what your toolbox specified on that Window.

Again, I’m assuming - and advising - that you shouldn’t be thinking of terms where you are actually moving the actual objects out of the toolbox. Especially if the toolbox is a different Window. If it’s the same Window, and when you move the object out of the toolbox it actually is removed from the toolbox, then maybe you DO wnat to move the actual object. Then my earlier advise would apply. If it doesn’t work, perhaps it’s because the object in your toolbox is assigned as inside that Container (if it’s a Container). Then you have to set the objects Parent to Nil. That “gets it out” of the Container.

If you are still having issues, I can write an example app for you, I already did.

Hi, Garth! Thanks a lot for giving the detailed response and advice me.

The app I am working is a diagram app. When it runs, it is somewhat like the visual progress designing a window with Xojo, that is, i) we need to drag some controls from the library and drop them to a main window, ii) we want to move these objects to the proper position, and iii) connect these objects with lines. It should be note that it is different between i) and ii). First, when I drag a control from library to the main window, I needn’t to show a new control in the screen right now. To show a rect to represent the dragged control is enough. For this step, the DragItem.drag can work well. When I drop the control to the main window, I need to generate a new object which is the copy of the control in the library. By looking up the user guide handbook I already can drag a control, that is, utilizing the DragItem object. But along this way, I cannot drop a control to the main window. Second, suppose that I have added some controls/objects in the main window. I need to drag them to their proper position. In this step, we should show a continuous moving process. That is to say, in the moving process, we cannot draw a rect to show the dragged object. We should show the moving object all the time. I would appreciate you if you could give me a example app. Thank your again!

There are a couple examples included with Xojo that might help you with some of this:

/Examples/Graphics and Multimedia/FlowChart
/Examples/Graphics and Multimedia/ObjectsInCanvas/ObjectsInCanvas

1 Like

Here is a diagramming app completely written in Xojo…the link is to a 15min evaluation version… but otherwise 100% functional

SNAPDRAGON [osx evaluation version]t

Thanks Dave! The app is just what I want. Can you give me some idea on realizing it?

I offered that to show it was quite possible … but that application is near 80,000 lines of code and took over 6 months to design and write.

And not to sound condesending… but based on the manner in which you asked your question… I am going to guess that this is WAY beyond your current level of expertise.