Extjs – drag-and-drop between tables

Extjs framework provides us with two helper classes responsible for performing drag-drop operation:

  • Ext.dd.DragZone
  • The most important element of this class is getDragData function, which provides data for drag operation.
    It is necessary for this method to return object with ddel property containing DOM element, from which draging operation was originated.

  • Ext.dd.DropZone
  • This class has two important methods. The first one is getTargetFromEvent which informs if drop operation should be performed. The other one is onNodeDrop which is responsible for actual drop operation.

Having covered the basics, let’s try to implement drag-drop operation. Let’s start from creating simple container with two tables.

In the next step we will create DragZone and DropZone.

As You cas see DragZone was created on the right table. I want to be able to drag only td elements, that is why function getDragData returns null, if drag operation was originated from other HTML element. Extjs will take care of showing approperiate animation, if drag-drop is available. I also overrode getRepairXY method, which is responsible for providing X and Y coordinates for animation, which is fired in case of invalid drop off. The code responsible for handling drop operation is a little bit more complicated. After creating a DropZone from left table, I ovverode getTargetFromEvent method, so as to drop could be performed only to td elements of table. What is more, using onNodeEnter and onNodeOut methods I changed target elements of the drop, to show user where given element will be placed. Actual drop is performed in onNodeDrop method, in my case I just replace HTML node form original one to dropped.
Here is a result:
Entire code listing looks like that:

Source code for this post can be found here

Extjs – drag-and-drop between tables