Problem with custom Draggable

Hello,



I defined a custom draggable control which looks like this:



[xml] <controlDefinition name=“itemDraggable” controller=“gui.ItemDraggableControl”>

<panel id=“mainPanel” childLayout=“center” backgroundColor="#00000000" width=“48px” height=“48px”>

<control id=“itemDrag” name=“draggable” width=“100%” height=“100%” childLayout=“center”>

<image id=“itemImage” filename="$itemImage"/>

</control>

</panel>

</controlDefinition>[/xml]



I also created a builder for it. Now I build one test itemDraggable with the builder and put it into a Droppable (by setting a Droppable as its parent).

The thing can be dragged around. However, when the drag starts, the image is resized to fill the whole screen and I can’t drop it into other Droppables.



The same approach works with standard Draggables.



What’s the problem?

If I recall correctly, when a draggable is initiated (drag started) the content of that draggable is “moved/copied” into an internal popup that is moved with the mouse while the original is hidden.



My guess is, probably that behavior is embedded into the default draggable control. But that’s just a guess.

I think it’s because the draggable is inside that panel. But how can I remove the panel without breaking it?

From the looks of your code I think its because your “itemDrag” control has the width and height set to 100% and the control is the item that is being dragged. I’m not sure what the “itemDraggable” control is trying to do. Try setting the “itemDraG” width and height to 48px like you are using for the panel. That might help with the resize issue. Is there a reason you are using the panel?



I don’t think your “itemDraggable” control will do what you think it will. From the looks of it, it seems like you are trying to make “itemDraggable” a draggable and I don’t think that is happening. I recently wrote a inventory gui using the draggable controls and ended up needing to rewrite them from scratch because extending from them just wasn’t possible.

I think you are right with the resize issue.



The panel is there, because if I remove it, the control is completely broken. I always have the issue with controlDefinitions that I have to give them an outer panel as the first element. If I give them a control as the first element, they are always broken.



If someone knows how to fix it without the outer panel, tell me.

What is the “itemDraggable” control supposed to do?

Being a draggable for an item icon, save me some copy&paste and store information about the item it shows.

Well right now you are nesting a draggable within a draggable which doesn’t work. I am assuming that your itemDraggableControl extends the existing draggable control? If that’s the case then you have a bit more work to do. I suggest looking at the Nifty draggable control xml definition. You will need to copy how that works in order to make a custom draggable control definition. If I remember correctly from when I re-implemented drag and drop there are several mouse events attached to a draggable. I found looking over all the nifty source code invaluable for getting my own implementation working.I hope that helps!

ItemDraggableControl doesn’t extend Draggable. All drag action is implemented by the Draggable inside the controlDefinition. That’s why it is there.



So this question still stands:


The panel is there, because if I remove it, the control is completely broken. I always have the issue with controlDefinitions that I have to give them an outer panel as the first element. If I give them a control as the first element, they are always broken.

If someone knows how to fix it without the outer panel, tell me.


All would work if I could get rid of the outer panel.

I’ve never used draggables so I can’t really help. Void is pretty regular in this forum though and I’d expect he’ll be able to give you an “official” answer when he sees this thread.

Even if you could get rid of that outer panel it wouldn’t solve your problems. The controller you are trying to use to keep track of item information wouldn’t get used. I think you are going to need to do a more in depth replacement of the current draggable controller.

Yes, it is getting used, I call the controller’s methods. The controller doesn’t need to mess with features already implemented by child controls the new control is made up of.

What I mean is once you get the draggable to drop into a droppable the parent control you defined that has “gui.ItemDraggableControl” wouldn’t be the parent anymore since only the child “itemDrag” would have moved.

Can I make a Droppable ditch all its Draggables somehow?

I think you need @void256 for this one :slight_smile:

Calling markForRemoval on the Draggable’s element is the key here.



The first question still stands.

New problem:



I have a window. Inside the window is a panel. Inside that 25 panels in a 5*5 grid pattern and inside them are Droppables.

Now I create a Draggable and when creating it I set one of the Droppables as its parent.



The problem is that the new Draggable isn’t inside its parent Droppable when initially rendered. Only when I drag the window it is being placed into its parent Draggable.



How do I fix?

My problem is still there:



I first add the Draggables into its corresponding Droppables(via draggableX.setParent(droppableX.getElement())) and open the Window they’re in:







As you can see the Draggables are not being rendered on their correct position. However, when I click on the window this happens:







How can I make them render in the correct position from the beginning?

I don’t think many people here use dragables which may be why the lack of response. Have you tried on the Nifty forums?

After everything has been updated (text and whatnot) and moved , try this:



[java]

// get the parent of the element you modified (or the closest to the root) and call this. It -should- fix this I would think.

parentElement.layoutElements();

[/java]