Link to home
Start Free TrialLog in
Avatar of hidrau
hidrauFlag for Brazil

asked on

Change the order pictures on a panel

Hello guys

I have a panel with 5 pictures. I'd like to know how can I change the order of my pictures on the panel?

I am posting with this thread a source made in Delphi XE4 with 5 pictures, there is a function

on it to realign all the pictures on the panel.

Example:

pic1  pic2  pic3  pic4  pic5

When I click the left mouse button on the pic5 and I drag it where is the pic1, I want to insert it exact the place where is the pic1, then the pictures will be on this sequence:

pic5  pic1  pic2  pic3  pic4

I tried insert this code:

procedure TForm1.Panel3DragDrop(Sender, Source: TObject; X, Y: Integer);
begin
  if (Source is TImage)  then
  Begin
    TImage(Source).Left := x
  End;
  AlignImages(Panel3, TImage(Source).Width, 15);
end;

Open in new window


How can I do that?

 I can change the image, but I notice that the function AlignImages doesn't allow reorder and it always put the image in the same order.

thanks
Source.zip
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Hi hidrau. Why are you trying to change the order in Panel3? Shouldn't it be Panel1?
And I suggest to rename your panels in a meaningful way: pnlSource and pnlDest, for instance... But, definitely, want you rearrange the images once thei're dropped in the Panel1 or before to drag them?
Avatar of hidrau

ASKER

marqusG, this is for another part of my game.

Drag and Drop from Panel 3 to panel1 is ok

Now I need a way to change the order in panel3.

I want to rearrange the images in my first panel. actually, I just need to know how to do that so that I can use the formula in my parts of my game.

did you get it?
ok...
Avatar of hidrau

ASKER

Another think that I am trying to is to give a double click in my image that is already in my
pnlDest and to send it to pnlSource , I tried to change only the parent of my image, but it didn't work yet.
Hey, guy, one thing per time otherwise we go out! :)
Avatar of hidrau

ASKER

don't worry friend. Take your time :)

I just comment with you about this.
I'm working on, but it will take a bit. Be patient friend: we'll get it :)
I use you source as a core. Modified in D2007 but can work in later versions.
I use Delphi's TFlowPanel which works great for your needs. I use it because it aligns controls. To get drop ovet image you need to set DragOver and DragDrop on TImage itself but only when parent is TFlowPanel.

As a bounus I show image of card while dragging.
FloatImage2.zip
Avatar of hidrau

ASKER

sinisav, I think you post the solution in a wrong thread.

This solution is for this thread:

https://www.experts-exchange.com/questions/28302691/Floating-image-over-panels.html?anchorAnswerId=39674272#a39674272
sorry - similar questions.... here it is....
Source2.zip
Avatar of hidrau

ASKER

Thanks sinisav for the post.

But your code is only to floating image, right? Not for ordering the images, right?
Avatar of hidrau

ASKER

I understood that TFlowPanel allow me to move the components on it, that is, according to delphi's help. But the proposal the thread I can achieve this.
when you drag image over existing one - then insert (and align too) is run.
Avatar of hidrau

ASKER

Ok, I tested it and I notice that the card is only inserted in the beginning of the cards, it doesn't allow to insert one in the middle of two cards.

Something like this:

pic1  pic2  pic3  pic4  pic5

changed

pic1  pic2  pic5  pic3  pic4  

See that I moved the card pic5 between pic2 and pic3.

This I wasn't able to do.
It works when you drag image over lower image - then it is inserted ok. If you need to drag into space between two images...

..change this event:
procedure TForm1.FlowPanel1DragDrop(Sender, Source: TObject; X, Y: Integer);
var
  img, rightImg: TImage;
  i: Integer;
begin
  if (Source is TCardDragObject) and ((Sender as TFlowPanel).ControlCount < 5) then
  begin
    //add image
    img := ((Source as TCardDragObject).Control as TImage);

    img.Left := X;
    img.Top := Y;
    img.Margins.Left := 10;
    img.AlignWithMargins := True;

    //get image on right if exists
    rightImg := nil;
    for i := 0 to (Sender as TFlowPanel).ControlCount-1 do
    begin
      if X<(Sender as TFlowPanel).Controls[i].Left then
      begin
        rightImg := TImage((Sender as TFlowPanel).Controls[i]);
        Break;
      end;
    end;

    img.Parent := (Sender as TFlowPanel); //append

    if rightImg <> nil then //...and insert before if needed
      (Sender as TFlowPanel).SetControlIndex(img,
        (Sender as TFlowPanel).GetControlIndex(rightImg));
  end;
end;

Open in new window

SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of hidrau

ASKER

marqusG, very nice your code too.

I'm gonna try all of them in details, I noticed that was a little hard code, not so simple.

Sinisav, I also gonna Try your code in details too, it gave me another vision and a good vision floating the card when I want to change it.

At a first glance I noticed some difficult to operate it.

===============================================================


A question for Sinisav:

1) Why can't I drag the image between them? It must work only when I drag the image over the lower image. It is not so good for what I need to do. Isn't there any way to do it between the pictures?

A question for marqusG

1) The propose of the change order that you gave me has some problem. When I insert the last picture between too at the beginning, the right pictures takes place the of my last picture. See this example so that you can understand:

 You way:

pic1  pic2  pic3  pic4  pic5

I take the pic5 and insert it between pic1 and pic2, the figures stay:

pic1  pic5  pic3  pic4  pic2

As you can see, it took place the pic5.

What I would like:

pic1  pic5  pic2 pic3  pic4  

as you can see, the pic5 pushed the pic2 to the right direction, and if I also do this :

pic2 pic3  pic4  pic5 pic1

take pic1 and insert after the pic5, the pic1 pushed the pic5 to the left direction.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of hidrau

ASKER

Hummm, very very good Sinisav. It was what I needed.

Now, I need to study your code, learn the way you made it and understand it for the futures programming on my software.

Well, I also want to tell that marqsG already gave me some idea of programming, I want to thank him a lot for his devotion on this.

I really liked the marqsG code fixed, so that I can study both ways. I want to know whether marqsG wants to go ahead on this or can I close the Thread?

I'm gonna split the points later.
Hi hidrau. I'm working on because it's a challenge I wnat to win, but you can close the thread
without problems. When I'll get it working I'll post here for you if you'll want to see it :)

Cheers
Avatar of hidrau

ASKER

MarqusG, please, post your code here, I will appreciate it to study.

Thanks very much for your help
Avatar of hidrau

ASKER

Sinisav, when I gave a double click on the picture, why it doesn't return to the panel3?

I inserted this code on and thought it would work, but none:

procedure TForm1.Image7DblClick(Sender: TObject);
begin
  Timage(sender).Parent := Panel3;
end;

Open in new window


is there any function that I should disable?
Becasue drag is started which reverted parent back. Try this:

procedure TForm1.Image7DblClick(Sender: TObject);
begin
  if TImage(sender).Parent is TFlowPanel then
  begin
    TImage(sender).Parent := Panel3;
    //set position
    TImage(sender).Left := Panel3.ControlCount * (TImage(sender).Width+10); //space between
  end;
end;

procedure TForm1.Image7MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Integer);
begin
  if not (ssDouble in Shift) then
    TImage(Sender).BeginDrag(True);
end;

Open in new window

Avatar of hidrau

ASKER

Once thanks, I am gonna try it :)
Avatar of hidrau

ASKER

Thanks very much
Avatar of hidrau

ASKER

Sinisav, only to know.

I have a listbox1 with some words and a second empty listbox2. I can drag any word from listbox1 and drop it to listbox2, but the cursor is a drag figure and can't see the word that I am draging to the destination.

Is it possible to do it as it was made to picture? When I drag the image, I can pic it and it float with my cursor until the destination, can I do that with words?
Yes, it can be done. You must calc text widith and height using current font in canvas of listbox, set this widith/height to DragImgList, draw this text with TextOut do bitmap, and assign bitmap to imagelist (similar like for card).
If you need example I can make it.
Avatar of hidrau

ASKER

hummm, alright.

I am gonna open another thread. I'd like an example of this.

I am reading a book as you recommend, little by little I am gonna reach a good knowledge :) I hope lol