Drag'n'Drop
Nifty Drag and Drop support is based on two different controls. The Draggable control is used as the container for Nifty elements that can be dragged around and the Droppable control acts as the container to mark elements that Draggables can be dropped on. Both controls (and the elements that they contain) are just regular elements on a Nifty screen. While the elements are being dragged around a temporary popup layer is created automatically and the Draggable control is being moved to that layer. This way the Draggable will always be on top of all other elements/layers on the screen.
When it's time to drop the Draggable all elements below the mouse cursor are checked. If a Droppable has been found it will be used as the target for the drop action. It is possible to register a DroppableDropFilter at the Droppable so that you can check if this specific Droppable control accepts the given Draggable.
If the drag operation ends without a Droppable being found at the mouse cursor position or if the Droppable denies the Draggable to be dropped, the Draggable can optionally be reverted to the position at the start of the drag operation.
Eventbus events are being generated for the start and end of a drag operation as well as for the moment a Draggable has been successfully dropped.
The drop operation is optional. You can defined Draggables that can only be dragged around without ever being dropped at all. This features is used for example for the Standard Controls Window where window controls can be dragged around the screen but can't be dropped anywhere.
Both controls (Draggable and Droppable) only act as invisible container elements for the actual elements to be dragged around or to be dropped on. Therefore it is expected that you create the actual content and only wrap this content in Draggable or Droppable controls. You can do that with XML or with the help of the Java Builders.
There actual exist Java interfaces in the form of a specific NiftyControl interface for both controls. These interfaces are mostly empty because it is expected that all attributes are set when the controls are created (explained below).
The following tables describe all of the parameters that you can apply to the controls when they are being created.
Draggable
| Name | Datatype | Default | Description |
| handle | String | null | Here you can define the Nifty element-id (or sub-id with a leading #) that should be used as the actual handle for the drag operation. For instance if you have a window control and you only want the window to be dragged around with the window title bar then the id of the window title bar (inside of the Draggable control) can be given with the "handle" parameter. |
| revert | Boolean | true | When the "revert" parameter is set to "true" (the default value) this Draggable will revert its position back to its initial position when the drag operation has ended without a suitable drop target or when the mouse button is released while the drag operation is still in progress. When the "revert" parameter is set to "false" then the Draggable just stays at the position where you've released the mouse button. |
| drop | Boolean | true | When the "drop" parameter is set to "true" (the default value) this Draggable can be dropped on a Droppable. |
Droppable
There are currently no parameters available for the Droppable control.
The following EventBus notifications are being send published.
Draggable
The "DraggableDragStartedEvent" is being published when a drag operation is being started. The event will transmit the source Droppable control where the operation started as well as the actual Draggable control that is being dragged. When the Draggable is being dragged without being a child of another Droppable control the Droppable source parameter will be null.
The "DraggableDragCanceledEvent" is being published when the drag operation has ended. Either because it has been successfully been dropped on a Droppable or because the mouse button has been released.
Droppable
When a drop operation has been successful the "DroppableDroppedEvent" is being published. It will contain the source and target Droppables that were involved as well as the Draggable.
It is possible to register instances of the interface "DroppableDropFilter" at a Droppable control. Nifty will call the "accept" method of this interace when it is about to drop a Draggable on this Droppable control. You can decide if the drop should be allowed or rejected by returning true or false in the "accept" method.
The following code will create a Droppable using the JavaBuilder API. It will give this Droppable area the id "chest" as well as a specific width and height. The actual content of this Droppable will be a simple image.
// create a Droppable
control(new DroppableBuilder("chest") {{
width("101px");
height("171px");
panel(new PanelBuilder() {{
image(new ImageBuilder("chest-image") {{
filename("dragndrop/Chest Open.png");
}});
}});The following code will create another Droppable which contains one child element which is a Draggable control.
// create another droppable that acts as the source and populate it with a Draggable
control(new DroppableBuilder("key-initial") {{
width("101px");
height("171px");
control(new DraggableBuilder("key") {{
childLayoutCenter();
image(new ImageBuilder() {{
filename("dragndrop/Key.png");
}});
}});
}});// create a Droppable
<control id="MyDroppable3" name="droppable" padding="10px" width="140px" height="140px" align="center" valign="top">
<effect>
<onActive name="border" post="true" color="#222f" border="1px" />
</effect>
<text text="Drop Here!" color="#eeef" valign="center" width="100%" />
</control>
// ...
// create a Draggable
<control id="MyDraggable1" name="draggable" backgroundColor="#f60f" width="120px" height="120px" childLayout="center" valign="top">
<text text="Drag Me!" color="#eeef" valign="center" width="100%" />
</control>Please note that both Draggable and Droppable should be treated as regular elements/controls and should be laid out like all the other elements.
Complete examples can be found in the nifty-examples project (using XML) or in the new nifty-default-controls-example (using JavaBuilder only).