Center a draggable in a droppable

Troubleshooting gui
1

Hello, I have a problem.

Currently I have a droppable:

and i have a draggable which is a potion. When I drag it to the droppable it becomes like this: .

I want the potion to be at the center of the droppable, but I don’t know how. I have looked at the wiki but there was no mention of it. I have used valign and align in the code, but it did not work. Neither did padding. The code I have used are:

Droppable:

[xml]<control id=“hotkey1” name=“droppable” style=“dropArea” backgroundImage=“Interface/hotkey1.png” width=“57px” height=“37px”></control>

[/xml]

Draggable:

[xml]<control id=“bighealthpotion” name=“draggable” backgroundImage=“Interface/items/bighealthpotion.png” width=“30px” height=“30px” childLayout=“center” valign=“center” align=“center”></control>[/xml]





Can somebody help me? :slight_smile:

Thanks

2

I never used nifty, so I’m not great at giving advice on this, but, couldn’t you just load a different image (one that is padded, so that it appears at the centre) once you drop the potion into your box?

3

Something like this should work:



[xml]

<control id=“myDroppable” name=“droppable” … >

<panel id=“doppableArea” childLayout=“center” … />

</control>



<control id=“myDraggable” name=“draggable” align=“center” valign=“center” … >

<panel id=“draggablePanel” … >

[ might contain an image or whatever ]

</panel>

</control>

[/xml]



The thing you have to remember with Nifty’s elements is that align and valign will affect the current control on which it is defined, but relevant to its parent. In the example above “myDraggable” would align itself (center/center) to its parent.



A second way to do it is that since draggable have to be in a childLayout=“absolute” container, you can tell the Nifty where to place that draggable element by using x="#" and y="#" when the dragStop() is called in your screen controller.



That’s off the top of my head. I haven’t tested it as I just woke up and I also don’t use dgraggable/droppable that way. But technically it should work. If not, repost and I’ll take a closer look.

4

madjack is right.



all nifty examples that use drag’n’drop use the absolute position layout. this way the dropables stay where you drop them.

5
@void256 said:
madjack is right.

all nifty examples that use drag'n'drop use the absolute position layout. this way the dropables stay where you drop them.


donno,

i use this ...
Code:
<controlDefinition name = "inventoryObject" controller = "mygame.screens.HudScreen"> <panel width="64" height="64" childLayout="center" visibleToMouse="true" > <panel id="droppableArea" childLayout="center" > <control name="droppable" childLayout="center"> <control id="draggable" name="draggable" align="center" valign="center" childLayout="center"> <image filename="Interface/Images/nothing.png" id="image" align="center" valign="center" width="64" height="64"/> </control> </control> </panel>

and it never centers

i use this to do it "manualy"
Code:
Element invobj = screen.getRootElement().findElementByName("invobj"); DroppableControl dropable = invobj.getControl(DroppableControl.class); dropable.addFilter(new DroppableDropFilter() { 
                            public boolean accept(Droppable drpbl, Draggable drgbl, Droppable drpbl1) {
                                drgbl.getElement().setConstraintX(new SizeValue(drpbl1.getElement().getX()+&quot;px&quot;));
                                drgbl.getElement().setConstraintY(new SizeValue(drpbl1.getElement().getY()+&quot;px&quot;)); 
                                RefreshLayout();
                                return true;
                            }

                        });

…

/// main beeing the main layer in my nifty screen

private void RefreshLayout()
{
Element mainElem = screen.getRootElement().findElementByName("main");
mainElem.layoutElements();
}


does not work

plz can someone help ?
thx
6

Center what element in what other element? could it be that the first panel in your “inventoryObject” control has the same size as the image (the draggable) it contains? Maybe there is no room to center it?



I’ve changed the size to 100x100 and added two of your “inventoryObject"s and this works for me:



[xml]<?xml version=“1.0” encoding=“UTF-8”?>

<nifty xmlns=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd” xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance” xsi:schemaLocation=“http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd”>

<useStyles filename=“nifty-default-styles.xml” />

<useControls filename=“nifty-default-controls.xml” />



<controlDefinition name=“inventoryObject”>

<panel width=“100” height=“100” childLayout=“center” visibleToMouse=“true” backgroundColor=”#f00f">

<panel id=“droppableArea” childLayout=“center”>

<control name=“droppable” childLayout=“center”>

<control id=“draggable” name=“draggable” align=“center” valign=“center” childLayout=“center”>

<image filename=“nifty-logo-150x150.png” id=“image” align=“center” valign=“center” width=“64” height=“64” />

</control>

</control>

</panel>

</panel>

</controlDefinition>



<screen id=“start”>

<layer id=“layer” backgroundColor="#003f" childLayout=“vertical”>

<control id=“bla1” name=“inventoryObject” backgroundColor="#f00f" />

<control id=“bla2” name=“inventoryObject” backgroundColor="#0f0f" />

</layer>

</screen>

</nifty>[/xml]



zymHB.png1138×904
http://i.imgur.com/zymHB.png



Since I didn’t have your original image asset I’ve used the nifty logo.



I can drag’n’drop the nifty logo from the red to the green droppable and it centers the logo into the panel.

7

thank you for your time

i’ll have a look to your code

so far i center objects programaticaly cos the center thing never worked for me unless the drop has been canceled

thx a lot anyway, ill check that out :wink: