Working with DnD Framework of Ext GWT (GXT) : A Basic Example of Drag and Drop

DnD framework of Ext GWT is extremely powerful framework which supports drag and drop between two container, list view, grid, tree panel, tree grid and more over between heterogeneous components like list view to grid or grid to tree panel, etc. Here I am going to describe how you can drag a Html component and drop to a container.

Create a new project named BasicDnDExample and add GXT library in the project. Now go to the onModuleLoad method of BasicDnDExample class and remove all the auto generated code of this method.
First create a HorizontalPanel  and a LayoutContainer as the source container. Then add source components to the source container.

     HorizontalPanel hp = new HorizontalPanel();  
     hp.setSpacing(10);  
           
     final LayoutContainer sourceContainer = new LayoutContainer();  
     sourceContainer.setLayoutOnChange(true);  
     sourceContainer.setWidth(300);  
          
     List<Employee> employeeList = TestData.getEmployees();
     for(Employee employee : employeeList)
     {
        final Html html = new Html("<div style=\"font-size:11px; border: 1px solid #DDDDDD;float:left;margin:4px 0 4px  4px; padding:2px;width:220px;\">"+
          "<div style=\"color:#1C3C78;font-weight:bold;padding-bottom:5px;padding-top:2px;text-decoration:underline;\">"+employee.getName()+"</div>"+ 
          "<div style=\"color:green\">Department:"+employee.getDepartment()+"</div>"+ 
          "<div style=\"color:blue\">Designation:"+employee.getDesignation()+"</div>"+
          "<div style=\"color:black;padding-bottom:2px;\">Salary:"+employee.getSalary()+"</div>"+ 
          "</div>" ); 
        sourceContainer.add(html, new FlowData(3));  
                 
        DragSource source = new DragSource(html) {  
           @Override  
              protected void onDragStart(DNDEvent event) {  
                event.setData(html);  
                event.getStatus().update(El.fly(html.getElement()).cloneNode(true));  
             }  
        };  
                 
    }

Using the employee list I have created a Html component for each employee and add this to the source container. Then create DragSource with the component and set this as the Data of the DNDEvent.  You will find the code of Empoyee and TestData classes here.


Now create another LayoutContainer as the target container. Then create a DropTarget from the target container,  which identifies components that can receive data from a drag and drop operations. While the cursor is over a target, the target is responsible for determining if the drop is valid and showing any visual indicators for the drop.

           
    final LayoutContainer targetContainer = new LayoutContainer();  
    targetContainer.setLayoutOnChange(true);  
    targetContainer.setBorders(true);  
    targetContainer.setSize(300, 500); 

   DropTarget target = new DropTarget(targetContainer) {  
       @Override  
       protected void onDragDrop(DNDEvent event) {  
         super.onDragDrop(event);  
         Html html = event.getData();  
         targetContainer.add(html);  
       }  
  };  
  target.setOverStyle("drag-ok");

In the onDragDrop method you can define what you want to do after the element is dropped on the target. Here I have got the Html component from the DNDEvent and added the component in the target container.
Finally add the source and target container in the HorizontalPanel.

  hp.add(targetContainer);  
  hp.add(sourceContainer);  
  RootPanel.get().add(hp);

Output of this tutorial will be like this