Recent

Author Topic: [Solved] Drag and Drop functional panel  (Read 3687 times)

lainz

  • Hero Member
  • *****
  • Posts: 4468
    • https://lainz.github.io/
[Solved] Drag and Drop functional panel
« on: November 09, 2018, 10:19:53 pm »
Hi, I want to create a panel for a POS application. The panel should be created with different kind of elements:

- product
- customer
- functions of the app / menu shortcuts

The panel should be organized like drag and drop, moving elements from a space to another in a grid.

Making a movable thing like this is for sure a hard thing to do, since I want automatically movement for example if I move something to the left and there is something in that place, move that element to the right and place the new element in place.

For example firefox, in a menu it has 'Personalizar' (in spanish), or maybe 'Customize' in english I'm not sure.. that has what I want to do.

I did some stuff like creating components at runtime and assigning events, that's not the problem, but yes the animation thing in a grid.

I need to use canvas to work in all OS, including ARM.

Anything already working you know, or any tips?
« Last Edit: November 10, 2018, 03:29:20 pm by lainz »

lainz

  • Hero Member
  • *****
  • Posts: 4468
    • https://lainz.github.io/
Re: Drag and Drop functional panel
« Reply #1 on: November 10, 2018, 03:29:07 pm »
Well, I made a basic one, with no animations... at least it works :)

circular

  • Hero Member
  • *****
  • Posts: 4217
    • Personal webpage
Re: [Solved] Drag and Drop functional panel
« Reply #2 on: November 10, 2018, 05:00:58 pm »
Am curious. Can you put a screenshot?
Conscience is the debugger of the mind

lainz

  • Hero Member
  • *****
  • Posts: 4468
    • https://lainz.github.io/
Re: [Solved] Drag and Drop functional panel
« Reply #3 on: November 10, 2018, 06:29:51 pm »
I'm on Mac and it doesn't display the same as in Windows, but is the idea.

The buttons at the top are new button, new middle button, new small button. Then when you click a new TButton is created, and you can move it around a virtual grid. Clic again to stop moving. The grid is just the mouse position and steps of 50 px, the big button is 100x100, the second is 100x50 and the smallest is 50x50.

Actions can be assigned with the right menu (not implemented). I think I will use a custom button since I want to give the user the choice of using images instead of text.

Buttons are not rearranged when you go over them, the thing that happens is that is moved to the other side when the mouse reaches that place, is due to the mouse move event that is on the panel not on the button, and when mouse is over any other Button his own mouse move event is fired, and the panel one is not fired anymore. That is working fine for me.

circular

  • Hero Member
  • *****
  • Posts: 4217
    • Personal webpage
Re: [Solved] Drag and Drop functional panel
« Reply #4 on: November 10, 2018, 07:12:58 pm »
Interesting. I think I get the idea  8-)
Conscience is the debugger of the mind

mgc

  • New Member
  • *
  • Posts: 13
Re: [Solved] Drag and Drop functional panel
« Reply #5 on: September 03, 2019, 08:48:28 am »
Lainz, please, could you give us an example, please?

 

TinyPortal © 2005-2018