Drag and Drop containercontrol

General
1

Hi All

Can we drag and drop container controls in xojo.

I have dynamically created container controls , and I want these to be dragged and dropped for ordering purposes.

Ex. Some container controls contains text and some images, few customers want image at the bottom, few of them want it in the middle, So I need to drag and drop the container controls at specified location.

Thanks in advance

2

When you add contents to a DynamicControl, depending on its kind (text or image), you change the ContainerControl Left and Top values to fit your needs ?

3

Thanks Emile.

But sometimes we need to sort the text contianer control also, So manual drag and drop is required.

Thanks in Advance

4

Not tested:

in ContainerControl (CC) MouseDown, put Return True to enable the MouseMove events,
in the MouseMove Event, add a check on some keyboard key down and activate MouseMove to move the ContainerControl 'till its correct location (say Cmd-Mouse-Click-Move ? [or Ctrl+Mouse+Click+Move]).
Add a way to stick the CC to the exact correct location (How ?).

Time to eat for me and my stomach is at command, so brain is far less reactive / creative as it already is in norma time. :wink:

HTH.

5

Basically, when you say “drag and drop” what you want is just to move container controls, right ? It is much simpler than dropping the content in another control.

You may want to overlay a Canvas over the containerControl, so it catches mouse events.

  • In MouseDown, set X and Y to properties. For instance MouseDownX and MouseDownY with default value -1 indicating no drag is ongoing.
  • Return True, so you can have MouseDrag
  • In MouseDrag, compare X to MouseDownX and Y to MouseDownY.
  • Move the ContainerControl by the difference in value of X and MousedownX, as well as Y and MousedownY.
  • In MouseUp, set MouseDownX and MouseDownY to -1 to know drag has ended.
6

Thanks Emile and Michel .

I will implement as per the instructions provided .

7

Hi Michel

I tried the instruction you provided. Now the container control moves, but on mouse down I see a duplicate of the selected container control and also there is lot of flickering.

Is there any solution for it?

Thanks in advance.

8

Under Windows, flicker is unfortunately very difficult to eliminate.

A trick used by Windows is to show a rectangle during the move, instead of the full control.

You should obtain that by drawing the rectangle in the canvas, and make the CC invisible.

  • In the Canvas Open event, add :

me.parent = Nil

  • In the canvas Paint event :
If not self.Visible then g.Drawrect(0,0,me.width,me.height)
  • In MouseDown, make the other controls invisible :
Self.hide
  • In MouseUp, make the other controls visible :
self.visible = True

You may need to add this in MouseDrag if the rectangle does not seem to move :

me.invalidate
9

Thanks Michel

As I’m new to xojo, is it possible for you to share some example projects?

Thanks in Advance.

10

Since you already have the project that moves container control and uses a canvas to receive events, it should be pretty easy to implement.

Try to follow step by step my post. Afterward, if you still have questions, I will be around.

11

Thanks Michel…I will try

12

The more you try, the more you learn. And become more comfortable. Don’t be afraid. You are not alone.

13

Thanks a lot Michel…I’m trying now…

14

It works… slight flicker is there , very negligible , much better than previous one.

Thanks a lot for the help…@Michel Bujardet

15

Congratulations, Divya !