diff --git a/administrator/components/com_categories/tmpl/categories/default.php b/administrator/components/com_categories/tmpl/categories/default.php
index 1ad9151a4ca3f..a535338523e5d 100644
--- a/administrator/components/com_categories/tmpl/categories/default.php
+++ b/administrator/components/com_categories/tmpl/categories/default.php
@@ -158,7 +158,9 @@
 									$parentsStr = '';
 								}
 								?>
-								<tr class="row<?php echo $i % 2; ?>" data-draggable-group="<?php echo $item->parent_id; ?>" item-id="<?php echo $item->id ?>" parents="<?php echo $parentsStr ?>" level="<?php echo $item->level ?>">
+								<tr class="row<?php echo $i % 2; ?>" data-draggable-group="<?php echo $item->parent_id; ?>"
+									data-item-id="<?php echo $item->id ?>" data-parents="<?php echo $parentsStr ?>"
+									data-level="<?php echo $item->level ?>">
 									<td class="text-center">
 										<?php echo HTMLHelper::_('grid.id', $i, $item->id, false, 'cid', 'cb', $item->title); ?>
 									</td>
diff --git a/administrator/components/com_menus/tmpl/items/default.php b/administrator/components/com_menus/tmpl/items/default.php
index 99368cceb23d5..3d8c157eae2d5 100644
--- a/administrator/components/com_menus/tmpl/items/default.php
+++ b/administrator/components/com_menus/tmpl/items/default.php
@@ -134,8 +134,8 @@
 							}
 							?>
 							<tr class="row<?php echo $i % 2; ?>" data-draggable-group="<?php echo $item->parent_id; ?>"
-								item-id="<?php echo $item->id; ?>" parents="<?php echo $parentsStr; ?>"
-								level="<?php echo $item->level; ?>">
+								data-item-id="<?php echo $item->id; ?>" data-parents="<?php echo $parentsStr; ?>"
+								data-level="<?php echo $item->level; ?>">
 								<td class="text-center">
 									<?php echo HTMLHelper::_('grid.id', $i, $item->id, false, 'cid', 'cb', $item->title); ?>
 								</td>
diff --git a/administrator/components/com_tags/tmpl/tags/default.php b/administrator/components/com_tags/tmpl/tags/default.php
index 50f837de95c02..648d1acd7ed02 100644
--- a/administrator/components/com_tags/tmpl/tags/default.php
+++ b/administrator/components/com_tags/tmpl/tags/default.php
@@ -161,7 +161,9 @@
 						$parentsStr = '';
 					}
 					?>
-						<tr class="row<?php echo $i % 2; ?>" data-draggable-group="<?php echo $item->parent_id; ?>" item-id="<?php echo $item->id; ?>" parents="<?php echo $parentsStr; ?>" level="<?php echo $item->level; ?>">
+						<tr class="row<?php echo $i % 2; ?>" data-draggable-group="<?php echo $item->parent_id; ?>"
+							data-item-id="<?php echo $item->id; ?>" data-parents="<?php echo $parentsStr; ?>"
+							data-level="<?php echo $item->level; ?>">
 							<td class="text-center">
 								<?php echo HTMLHelper::_('grid.id', $i, $item->id, false, 'cid', 'cb', $item->title); ?>
 							</td>
diff --git a/build/media_source/system/js/draggable.es6.js b/build/media_source/system/js/draggable.es6.js
index 5bd329d60b255..f000b852c12e4 100644
--- a/build/media_source/system/js/draggable.es6.js
+++ b/build/media_source/system/js/draggable.es6.js
@@ -8,6 +8,7 @@ let direction;
 let isNested;
 let dragElementIndex;
 let dropElementIndex;
+let dropElement;
 let container = document.querySelector('.js-draggable');
 const orderRows = container.querySelectorAll('[name="order[]"]');
 
@@ -91,6 +92,78 @@ if (container) {
     return result;
   };
 
+  const rearrangeChildren = ($parent) => {
+    if (!$parent.dataset.itemId) {
+      return;
+    }
+    const parentId = $parent.dataset.itemId;
+    // Get children list. Each child row should have
+    // an attribute data-parents=" 1 2 3" where the number is id of parent
+    const $children = container.querySelectorAll(`tr[data-parents~="${parentId}"]`);
+
+    if ($children.length) {
+      $parent.after(...$children);
+    }
+  };
+
+  const saveTheOrder = (el) => {
+    let orderSelector;
+    let inputSelector;
+    let rowSelector;
+
+    const groupId = el.dataset.draggableGroup;
+
+    if (groupId) {
+      rowSelector = `tr[data-draggable-group="${groupId}"]`;
+      orderSelector = `[data-draggable-group="${groupId}"] [name="order[]"]`;
+      inputSelector = `[data-draggable-group="${groupId}"] [name="cid[]"]`;
+    } else {
+      rowSelector = 'tr';
+      orderSelector = '[name="order[]"]';
+      inputSelector = '[name="cid[]"]';
+    }
+
+    const rowElements = [].slice.call(container.querySelectorAll(rowSelector));
+    const rows = [].slice.call(container.querySelectorAll(orderSelector));
+    const inputRows = [].slice.call(container.querySelectorAll(inputSelector));
+
+    dropElementIndex = rowElements.indexOf(el);
+
+    if (url) {
+      // Detach task field if exists
+      const task = document.querySelector('[name="task"]');
+
+      // Detach task field if exists
+      if (task) {
+        task.setAttribute('name', 'some__Temporary__Name__');
+      }
+
+      // Prepare the options
+      const ajaxOptions = {
+        url,
+        method: 'POST',
+        data: getOrderData(rows, inputRows, dragElementIndex, dropElementIndex).join('&'),
+        perform: true,
+      };
+
+      Joomla.request(ajaxOptions);
+
+      // Re-Append original task field
+      if (task) {
+        task.setAttribute('name', 'task');
+      }
+    }
+
+    // Update positions for a children of the moved item
+    rearrangeChildren(el);
+
+    // Reset data order attribute for initial ordering
+    const elements = container.querySelectorAll('[name="order[]"]');
+    for (let i = 0, l = elements.length; l > i; i += 1) {
+      elements[i].dataset.order = i + 1;
+    }
+  };
+
   // eslint-disable-next-line no-undef
   dragula([container], {
     // Y axis is considered when determining where an element would be dropped
@@ -132,63 +205,14 @@ if (container) {
       const rowElements = [].slice.call(container.querySelectorAll(rowSelector));
 
       dragElementIndex = rowElements.indexOf(el);
-    })
-    .on('cloned', () => {
-
     })
     .on('drop', (el) => {
-      let orderSelector;
-      let inputSelector;
-      let rowSelector;
-
-      const groupId = el.dataset.draggableGroup;
-
-      if (groupId) {
-        rowSelector = `tr[data-draggable-group="${groupId}"]`;
-        orderSelector = `[data-draggable-group="${groupId}"] [name="order[]"]`;
-        inputSelector = `[data-draggable-group="${groupId}"] [name="cid[]"]`;
-      } else {
-        rowSelector = 'tr';
-        orderSelector = '[name="order[]"]';
-        inputSelector = '[name="cid[]"]';
-      }
-
-      const rowElements = [].slice.call(container.querySelectorAll(rowSelector));
-      const rows = [].slice.call(container.querySelectorAll(orderSelector));
-      const inputRows = [].slice.call(container.querySelectorAll(inputSelector));
-
-      dropElementIndex = rowElements.indexOf(el);
-
-      if (url) {
-        // Detach task field if exists
-        const task = document.querySelector('[name="task"]');
-
-        // Detach task field if exists
-        if (task) {
-          task.setAttribute('name', 'some__Temporary__Name__');
-        }
-
-        // Prepare the options
-        const ajaxOptions = {
-          url,
-          method: 'POST',
-          data: getOrderData(rows, inputRows, dragElementIndex, dropElementIndex).join('&'),
-          perform: true,
-        };
-
-        Joomla.request(ajaxOptions);
-
-        // Re-Append original task field
-        if (task) {
-          task.setAttribute('name', 'task');
-        }
-      }
+      dropElement = el;
     })
     .on('dragend', () => {
-      const elements = container.querySelectorAll('[name="order[]"]');
-      // Reset data order attribute for initial ordering
-      for (let i = 0, l = elements.length; l > i; i += 1) {
-        elements[i].dataset.order = i + 1;
+      if (dropElement) {
+        saveTheOrder(dropElement);
+        dropElement = null;
       }
     });
 }