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

9 comments:

Heiko August 24, 2010 at 7:44 AM  

Hi Shams,

great blog. Helped me a lot - thanks a lot.

I've got a question regarding dnd and listviews. in a project i've got a listview that has an attached template. in the output it looks similiar to your listview example. question now is how to get the dnd working for a single bean? any help would be highly appreciated.

Unknown August 25, 2010 at 8:09 PM  

@Heiko: Sorry i can not understand your question. What do you mean by single bean?

Anonymous September 8, 2010 at 6:01 AM  

Hi Shams,

I've got it figured out meanwhile. Sorry for answering so late, but we are in a big rush to finish a project.

Thanks again for your wonderful blog.

chears heiko

Unknown September 30, 2010 at 3:45 AM  

I am getting below error:

Compiling module com.dnd.BasicDnDExample
Validating newly compiled units
[ERROR] Errors in 'file:/E:/My_Workspace/gwt/GxtBasicDnDExample/src/com/dnd/client/BasicDnDExample.java'
[ERROR] Line 48: No source code is available for type com.dnd.server.Employee; did you forget to inherit a required module?
[ERROR] Errors in 'file:/E:/My_Workspace/gwt/GxtBasicDnDExample/src/com/dnd/client/TestData.java'
[ERROR] Line 10: No source code is available for type com.dnd.server.Employee; did you forget to inherit a required module?
Finding entry point classes
[ERROR] Unable to find type 'com.dnd.client.BasicDnDExample'
[ERROR] Hint: Previous compiler errors may have made this type unavailable
[ERROR] Hint: Check the inheritance chain from your module; it may not be inheriting a required module or a module may not be adding its source path entries properly


Any idea why this error.

Thanks,
Cheatana

Unknown September 30, 2010 at 10:13 AM  

@Chetana: The Employee model class should be in the client package.

Anonymous November 6, 2010 at 9:24 AM  

Hi Shams,
Really liked your post, decided to look deeper, and began to study the source code which is on the official site. I encountered a problem and I hope you can help me solve it, the problem is that when a parent to pull out all the children, he becomes a child. On the official website ( http://www.sencha.com/examples/#overview ), there are examples where this does not happen, in particular "Tree to Tree" and "Reordering tree" in "Drag and Drop". I hope for your help.

Best regards.

Jimmy August 3, 2011 at 8:33 AM  

Hi Shams,

Thanks for this wonderful blog. It helped me a lot.

Cheers,
Jim

Anonymous April 3, 2012 at 5:49 AM  

dear sir, your tutorial make my path clear, thanks a lot
i have portal in my application and i wont to save the position of portlet in DB, so i need to get the current position of portlet after the DragEnd. can you help me

bLaCkMaGiCiAn January 14, 2013 at 9:09 AM  

Hello Sir, great work indeed, only one question,in the case of having a lot of data to put in the list, is there any way to add a vertical scroll and that way save space, know any solution for that?

Total Pageviews

Tags

Twitter Updates
    follow me on Twitter

    Followers