Fixes on reordering categories

resources/views/Shop/Admin/Categories/partials/tree.blade.php

@@ -13,12 +13,58 @@
 
 @push('scripts')
 	<script>
+		var position = '';
+		var target_node = '';
+
 		$(function() {
-		    $('#tree1').tree({
+
+		    var $tree = $('#tree1').tree({
 			  	dragAndDrop: true,
+			  	onDragStop: handleMove,
 			  	autoOpen: 0
 			});
+
+
+			$tree.on('tree.move', function(e) {
+			    // e.preventDefault();
+
+			    position = e.move_info.position;
+			    target_node = e.move_info.target_node;
+
+			    function getNewParentNode() {
+			        if (position == 'inside') {
+			            return target_node;
+			        }
+			        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('Shop.Admin.Categories.moveTree') }}",
+  				data: { node_id: node.id, type: position, target_id: target_node.id }
+			});
+    		// console.log(e);
+    		// console.log($('#tree1').tree('getTree'));
+		}
+
 	</script>
 @endpush
 

resources/views/load/fancytree.blade.php

@@ -7,7 +7,7 @@
 	<script src="/modules/fancytree/jquery.fancytree-all-deps.min.js"></script>
 
 	<script>
-		$(function(){
+		$(function() {
 			// Initialize Fancytree
 			$("#tree").fancytree({
 				extensions: ["childcounter", "dnd5", "edit", "glyph", "wide"],
@@ -15,13 +15,31 @@
 				checkbox: false,
 				selectMode: 3,
 				dnd5: {
-					dragStart: function(node, data) { return true; },
-					dragEnter: function(node, data) { return true; },
-					dragDrop: function(node, data) { data.otherNode.copyTo(node, data.hitMode); }
+					dragStart: function(node, data) {
+						return true;
+					},
+					dragEnter: function(node, data) {
+						return true;
+					},
+					dragDrop: function(node, data) {
+						alert("Drop on " + node + ":\n"
+          + "source:" + JSON.stringify(data.otherNodeData) + "\n"
+          + "hitMode:" + data.hitMode
+          + ", dropEffect:" + data.dropEffect
+          + ", effectAllowed:" + data.effectAllowed);
+
+
+						console.log(node);
+						console.log(data); 
+						data.otherNode.copyTo(node, data.hitMode);
+					}
 				},
 				glyph: glyph_opts,
 				// source: {url: "ajax-tree-taxonomy.json", debugDelay: 1000},
-				source: {url: "ajax-tree-products.json", debugDelay: 1000},
+				source: {
+					url: "ajax-tree-products.json",
+					debugDelay: 1000
+				},
 				// toggleEffect: { effect: "drop", options: {direction: "left"}, duration: 400 },
 				wide: {
 					iconWidth: "1em",       // Adjust this if @fancy-icon-width != "16px"
@@ -40,7 +58,10 @@
 					// }
 				},
 				lazyLoad: function(event, data) {
-					data.result = {url: "ajax-sub2.json", debugDelay: 1000};
+					data.result = {
+						url: "ajax-sub2.json",
+						debugDelay: 1000
+					};
 				}
 			});
 		};