Simple Dojo D'n'D tutorial
Drag'n'Drop feature
The following example comes from wicket-contrib-dojo-example, you can check-out it on svn.
Dojo Drag'n'Drop allows users to define areas where container can be drop and some others can be drag. DojoDragContainer can only be drop on DojoDropContainer.
Java Sources
public class DnDShower extends WebPage { public DnDShower(PageParameters parameters){ //Create a DojoDropContainer DojoDropContainer dropContainer = new DojoDropContainer("dropContainer"){ public void onDrop(AjaxRequestTarget target, DojoDragContainer container, int position) { System.out.println("position = " + position); System.out.println("DojoDragContainer" + container.getId()); } }; add(dropContainer); //Create some DojoDragContainer on the page DojoDragContainer dragContainer1 = new DojoDragContainer("dragContainer1"); DojoDragContainer dragContainer2 = new DojoDragContainer("dragContainer2"); DojoDragContainer dragContainer3 = new DojoDragContainer("dragContainer3"); add(dragContainer1); add(dragContainer2); add(dragContainer3); //Add some DojoDragContainer in the DojoDropContainer DojoDragContainer dragContainer4 = new DojoDragContainer("dragContainer4"); DojoDragContainer dragContainer5 = new DojoDragContainer("dragContainer5"); dropContainer.add(dragContainer4); dropContainer.add(dragContainer5); //More friendly for this sample : add some images in containers dragContainer1.add(new Image("pic1")); dragContainer2.add(new Image("pic2")); dragContainer3.add(new Image("pic3")); dragContainer4.add(new Image("pic4")); dragContainer5.add(new Image("pic5")); } }
In this exemple we add Some DojoDragContainer in the page and in the DojoDropContainer. All these DojoDragContainer can be moved with the mouse.
The DojoDropContainer is the only area of the page where DojoDragContainer can be put. If you are dragging a DojoDragContainer and if you drop it out of the DojoDropContainer, the DojoDragContainer will return to its original position else it will be added on the DojoDropContainer and the DojoDropContainer.onDrop() will be triggered.
The DojoDragContainer will also trigger its onDrag() method when you start to drag it.
If you want to be hable to drag back DojoDragContainer at their first position, you should add an other DojoDropContainer containing the 3 firsts DojoDragContainer.
Html Sources
<div> <div class="drag" wicket:id="dragContainer1"><img wicket:id="pic1" src="pic1.jpg"/></div> <div class="drag" wicket:id="dragContainer2"><img wicket:id="pic2" src="pic2.jpg"/></div> <div class="drag" wicket:id="dragContainer3"><img wicket:id="pic3" src="pic3.jpg"/></div> </div> <hr/> <div wicket:id="dropContainer" style="background-color:blue;"> <div class="drag" wicket:id="dragContainer4"><img wicket:id="pic4" src="pic4.jpg"/></div> <div class="drag" wicket:id="dragContainer5"><img wicket:id="pic5" src="pic5.jpg"/></div> </div>