How to drag and drop within grid and between grids in JavaScript?
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 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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
