Nifty Draggable question


I’ve recently started playing with draggables and droppables, and have a question

  1. I have a relative layout(%), and my draggables take up 100% of the space of the container they’re in. When i start to drag them however, they fill the whole screen instead. Bug or feature?

It’s neither a bug, nor a feature.

The HUD in my game is full screen and I have several small windows that I can drag and drop. There has to be something wrong in your screen or I misunderstand the question/problem.

Quite possibly, as i have other issues as well, like my draggables appearing “outside” the droppables, rather than inside them. I’ll just have to go over it, once again :stuck_out_tongue:

My main HUD screen is divided into layers. The first, which is the “whole screen” contains one control and it goes like this (sorry for the tags/quotes):


<layer …>

<control id=“pageDroppable” name=“droppable” width=“100%” height=“100%” valign=“top” />

</layer …>


That’s the “screen”'s droppable (which can receive draggables). In my case it only defines that layer as “you can drag windows inside me as you want”. Hopefully that makes sense.

Now, each later after that has a childLayout=“absolute” tag which guarantees that they can be repositioned anywhere programmatically. Those layers that I want to be draggable (all of the layers except the first one really) has a:


<layer …>

<control id=“infoPanelDraggable” name=“draggablePanel” width=“225px” height=“303px” x="${CALL.infoPanelX()}" y="${CALL.infoPanelY()}" valign=“top”>

</layer …>


right after the “layer …” tag which makes them drag & drop’able.

Have I lost you somewhere in there? :wink:

Edit: tried to make it readable. Failed.

Setting childLayout=“absolute” on the Droppable, makes the draggable end up correctly inside it when moved into it. (on start it’s up in the left corner, though. I generate the draggables through the builder, with the Droppable as parent element).

childLayout=“absolute” on the Draggable makes them stuck up in the left corner (regardless of Droppable layout).

The size issue prevails though.

I liked how having childLayout=“vertical” on the Droppable made the Draggables stack nicely (albeit below the Droppable rather than inside it).

I also tried giving the Draggable a fixed size, and it still swells up when being dragged, so my first thought that it had to do with relative size was indeed wrong.

Edit: trying this again, it seems indeed that having a fixed size keeps the correct size when being dragged.

Edit: Another weird issue i’m having: If i change the height of the parent Droppable, the Draggables also get scaled, ie, setting the Droppable height=“50%” also sets each Draggable to height=“50%”. Sorry.

on start it’s up in the left corner, though

Have you set X="numberOfPixels" and Y="numberOfPixels" on the draggable control? My guess is you don't.

childLayout=”absolute” on the Draggable makes them stuck up in the left corner (regardless of Droppable layout).

Same issue as above.

When using absolute Nifty has no idea where to place those children if X/Y isn't set so they get put at 0, 0. Also, absolute is... well absolute. :) You have to TELL Nifty where to place those at the start. Once they've been moved about they'll retain their position, but before that, it's your job to put them somewhere by default.

Kinda forgot the other issue…

If I get it right, you mean to say that when you move a draggable, it gets resized?

Some progress made:

Setting childLayout=“absolute” on the Droppable, keeping childLayout=“center” on the Draggable, and then setting x(parentElement.getX()), y(parentElement.getY()) in the builder makes the Draggable start near the intended position (seems to be bottom right of it), and the Draggables are also dragged correctly to the Droppable.

Should i then assume that you can’t have childLayout=“vertical” to have several Draggables stacked inside a Droppable (i can fix that programmatically somehow i guess).

Yes, every time i drag a Draggable with relative (%) size gives it the relative size of the screen when being dragged. I tried again now with an absolute size, which worked correctly.

If you want to “stack” draggables you’ll have to either implement a method to get where the other draggables are and position accordingly. There’s no way around that. Or, if all your draggables are the same size then you could separate your droppable into a grid and put a droppable into each grid (don’t forget to remove the droppable from the grid’s parent if the grid takes up the whole screen as it might give unexpected results if you drop outside a grid).

Draggables can’t be relative and stay the same size. :stuck_out_tongue: Think about it. You move a draggable from a droppable into another droppable that might have a different size thus resizing to follow its instruction, which is to be a relative size to its parent. :wink: Unless all your droppables are the same size, this is the expected result. If you don’t want resizing you’ll have to set the draggable size to “static” using pixels, points or whatever you need/use.

Well, in my case the draggables are the same size, but that’s probably not the general case :slight_smile:

So, in order to have my draggables “relative” to the screen size, i’ll measure the screen upon creation, and then scale my draggables accordingly (and hope the screen size doesn’t change :P)

Still, i wonder if it wouldn’t be possible (since draggables are converted to popups while being moved) to have the draggable’s size measured and then applied to an absolute sized popup, and back to relative again as a draggable.

It seems logical to me, but maybe it’s just not possible with how it works “under the hood”.

Thanks for the help, madjack.

Honestly, I don’t know why people bother with GUI size ratio. That’s my own opinion really but I don’t think a game should have a screen smaller than 1280x768 at the minimum. By going that way you stop yourself from major problems. With a fixed-size GUI, if it’s readily readable at 1280x768 it’ll be fine at higher res. But as I said, that’s my opinion. :slight_smile:

(since draggables are converted to popups while being moved)

Are you positive on that? I'll admit I've never checked but last I used popups, they use the whole screen and it's up to you to decide how they're displayed (most of the layer transparent w/ the dialog either absolute or whatever). I might be wrong on that though, but my experience with Nifty seems to reflect that.

Anyway, glad it's now "fixed. :)