fix: make drag-and-drop on category tree persist correctly
Two issues prevented the shelf tree reordering from working: - The JS used ``onDragStop`` (only fires for drags outside the tree) instead of the ``tree.move`` event to send the AJAX request. Moved the POST into the ``tree.move`` handler. - The ``inside`` case used ``appendNode`` (last child), but jqTree sends ``inside`` when dropping before the first child. Switched to ``prependNode`` so the node lands first. - Added missing ``before`` case with ``insertBeforeNode``.
This commit is contained in:
@@ -67,17 +67,15 @@ class Categories
|
|||||||
$category_target = self::getNode($target_id);
|
$category_target = self::getNode($target_id);
|
||||||
|
|
||||||
switch ($type) {
|
switch ($type) {
|
||||||
|
case 'before':
|
||||||
|
return $category->insertBeforeNode($category_target);
|
||||||
case 'after':
|
case 'after':
|
||||||
$category->afterNode($category_target);
|
return $category->insertAfterNode($category_target);
|
||||||
break;
|
|
||||||
case 'inside':
|
case 'inside':
|
||||||
$category_target->appendNode($category);
|
return $category_target->prependNode($category);
|
||||||
break;
|
|
||||||
default:
|
default:
|
||||||
$category->afterNode($category_target);
|
return $category->insertAfterNode($category_target);
|
||||||
}
|
}
|
||||||
|
|
||||||
return $category->save();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public static function create($data)
|
public static function create($data)
|
||||||
|
|||||||
@@ -14,57 +14,30 @@
|
|||||||
|
|
||||||
@push('js')
|
@push('js')
|
||||||
<script>
|
<script>
|
||||||
var position = '';
|
|
||||||
var target_node = '';
|
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
var $tree = $('#tree1').tree({
|
var $tree = $('#tree1').tree({
|
||||||
dragAndDrop: true,
|
dragAndDrop: true,
|
||||||
onDragStop: handleMove,
|
|
||||||
autoOpen: 0
|
autoOpen: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
$tree.on('tree.move', function(e) {
|
$tree.on('tree.move', function(e) {
|
||||||
// e.preventDefault();
|
var position = e.move_info.position;
|
||||||
|
var target_node = e.move_info.target_node;
|
||||||
|
var moved_node = e.move_info.moved_node;
|
||||||
|
|
||||||
position = e.move_info.position;
|
$.ajax({
|
||||||
target_node = e.move_info.target_node;
|
method: "POST",
|
||||||
|
url: "{{ route('Admin.Shop.Categories.moveTree') }}",
|
||||||
function getNewParentNode() {
|
data: {
|
||||||
if (position == 'inside') {
|
node_id: moved_node.id,
|
||||||
return target_node;
|
type: position,
|
||||||
}
|
target_id: target_node.id
|
||||||
else {
|
}
|
||||||
// before or after
|
});
|
||||||
return target_node.parent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var parent_node = getNewParentNode();
|
|
||||||
console.log("Parent node", parent_node);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleMove(node, e) {
|
|
||||||
console.log(node);
|
|
||||||
node_id = node.id;
|
|
||||||
console.log(node_id);
|
|
||||||
console.log(position);
|
|
||||||
console.log(target_node);
|
|
||||||
target_node_id = target_node.id;
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
method: "POST",
|
|
||||||
url: "{{ route('Admin.Shop.Categories.moveTree') }}",
|
|
||||||
data: { node_id: node.id, type: position, target_id: target_node.id }
|
|
||||||
});
|
|
||||||
// console.log(e);
|
|
||||||
// console.log($('#tree1').tree('getTree'));
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
@endpush
|
@endpush
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user