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
LVL 1
hidrauAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Sinisa VukConnect With a Mentor Commented:
Here is modified version with shuffling...

Old code is blocking dragging images within flowpanel. Main goal is to get right index position in flowpanel control list.
Source3.zip
0
 
Marco GasiFreelancerCommented:
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?
0
 
hidrauAuthor Commented:
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?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Marco GasiFreelancerCommented:
ok...
0
 
hidrauAuthor Commented:
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.
0
 
Marco GasiFreelancerCommented:
Hey, guy, one thing per time otherwise we go out! :)
0
 
hidrauAuthor Commented:
don't worry friend. Take your time :)

I just comment with you about this.
0
 
Marco GasiFreelancerCommented:
I'm working on, but it will take a bit. Be patient friend: we'll get it :)
0
 
Sinisa VukCommented:
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
0
 
hidrauAuthor Commented:
sinisav, I think you post the solution in a wrong thread.

This solution is for this thread:

http://www.experts-exchange.com/Programming/Languages/Pascal/Delphi/Q_28302691.html#a39674272
0
 
Sinisa VukCommented:
sorry - similar questions.... here it is....
Source2.zip
0
 
hidrauAuthor Commented:
Thanks sinisav for the post.

But your code is only to floating image, right? Not for ordering the images, right?
0
 
hidrauAuthor Commented:
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.
0
 
Sinisa VukCommented:
when you drag image over existing one - then insert (and align too) is run.
0
 
hidrauAuthor Commented:
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.
0
 
Sinisa VukCommented:
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

0
 
Marco GasiConnect With a Mentor FreelancerCommented:
Here the working code, hidrau. It has required a bit of work but it's nice :)
DragDropImages.zip
0
 
hidrauAuthor Commented:
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.
0
 
hidrauAuthor Commented:
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.
0
 
Marco GasiFreelancerCommented:
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
0
 
hidrauAuthor Commented:
MarqusG, please, post your code here, I will appreciate it to study.

Thanks very much for your help
0
 
hidrauAuthor Commented:
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?
0
 
Sinisa VukCommented:
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

0
 
hidrauAuthor Commented:
Once thanks, I am gonna try it :)
0
 
hidrauAuthor Commented:
Thanks very much
0
 
hidrauAuthor Commented:
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?
0
 
Sinisa VukCommented:
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.
0
 
hidrauAuthor Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.