AJAX Tutorial for Java Programmers

Dragging and Dropping

Using AJAX, user interfaces such as dragging and dropping become possible. We will briefly cover that here.

Dragging and dropping involves two items

  1. A dragging source, and
  2. A drop target.
The source is something that you click on, and drag around. The target is where you release the source, and which potentially does something useful with it!

In Jaxcent, you set an element draggable just by calling setDraggable on it.

To make something a drop-target, you just override the OnDragDrop method. This method takes on argument, which is the source that has been dragged.

The OnDragDrop takes the specific actions related to the drag and drop action. For instance, if the drop target is an icon of a trash-can, it would make sense for it to delete the dragged item, and to record in the session that the dragged item has been removed.

Drag and drop will typically change your underlying data structure, and therefore will often involve working with the session. For this example, we are not going to save anything in the session, because we just want to see how drag and drop can be made to work.

We will have two paragraphs, both of which serve as both a source as well as a target. They can be dragged and dropped on each other. The dropped one gets moved before the other one!

Exercise:  Write an HTML file with two paras and a matching Java file. Each of the two paras overrides the OnDragDrop method, and inserts the dropped source before it. In the constructor, make both paras draggable.
 
Next Step: Optimization Issues