Articles in this section
Category / Section

How to drag and drop within grid and between grids in JavaScript?

2 mins read

The default grid behavior is that we can perform drag and drop either within the grid or outside the JavaScript Grid. However, both cases can be achieved with the help of some sample side customizations. This is explained below,

Initially enable drag and drop for outside the grid(to other grids in this scenario) as explained in this documentation. The drag and drop within grid can be achieved by using grid’s reorderRows method in the rowDrop event based on the selected index and the drop index values. For checking whether the drop is occurring in the same grid as the dragged one a flag variable can be enabled in the grid’s rowDragStart event.

This is demonstrated in the below sample code,

var flag_fg = false;
 
// First grid’s rowDragStart event function 
function rowDragStart(args) {
      flag_fg=true;
}
 
// First grid’s rowDrop event function 
function rowDrop(args) {
    if(flag_fg){   
        var targetGrid = args.target.closest(".e-grid");
        // Check whether source and target grid are the same
        if (targetGrid && targetGrid === this.element){
         // Cancels the default operation
          args.cancel = true;
         // Gets the selected indexes
          var selectInds = this.getSelectedRows().map(x => parseInt(x.getAttribute('aria-rowindex'), 10));
         // Reorders the selected indexes to the drop index
          this.reorderRows(selectInds, args.dropIndex);
          this.refresh();
          return;
        }
        flag_fg = !flag_fg;        
    }
}

 

The no-drop cursor displayed while dragging within the grid can be modified by dynamically changing the cursor and adding a custom class based on the target. This is demonstrated below,

// First grid’s rowDrag event function
function rowDrag(args) {
       // Clone element is retrieved
        var cloneEle = this.element.querySelector('.e-cloneproperties.e-draganddrop');
       // Custom class is added/removed on the clone element based on the target
        if (args.target.closest('.e-grid') !== null) {
            cloneEle.classList.add('custom-cursor');
        } else {
            cloneEle.classList.remove('custom-cursor');
        }
}
 

 

<style>
    .e-cloneproperties.e-draganddrop.e-grid.e-dragclone.custom-cursor {
            cursor: pointer !important;
    }
</style>

 

The above customization can be done in the required grids.

Output

 

Drag and drop outside the grid

Drag and drop outside the grid

 

Drag and drop within the grid

Drag and drop within the grid

 

JavaScript (ES5) Sample: https://stackblitz.com/edit/unwdgn?file=index.html


Conclusion

I hope you enjoyed learning about how to drag and drop within grid and between grids.

You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied