How to reorder dxDataGrid rows using drag-and-drop

This example demonstrates how to move dxDataGrid rows using Draggable and Droppable plug-ins of the jQueryUI library. 

To accomplish this task, we need to perform the following steps:

1. Set a fake CSS class ("myRow") to a data row. This will help us find all data rows using a jQuery selector and assign Draggable and Droppable plug-ins to the rows. Assign the key value of each row to a row element. We need to use the dxDataGrid.rowPrepared callback function for this step.
2. When the drop event fires, we need to get indexes of the dropped and the target rows, recalculate indexes according our requirements and save them to a data store.
3. Reload data by calling the dxDataGrid.refresh method.

See also:
ArrayStore.load
ArrayStore.byKey
ArrayStore.update
.data()