I need to add drag and drop for Reorder Folder in the Tree View . Here some experiment code for that?
// Dynamically load the Sortable.js library
var script = document.createElement(‘script’);
script.src = “https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js”;
document.head.appendChild(script);
script.onload = function() {
console.log(“Sortable.js library loaded…”);
frappe.treeview_settings['Folder'] = {
get_label: function(node) {
console.log("Node data:", node);
return node.title || node.label || "Unnamed Folder";
},
on_render: function(node) {
console.log("Rendering node:", node.label);
// console.log("Node element:", node.$a);
node.$a.attr('draggable', 'true');
node.$a.on('dragstart', function() {
frappe.treeview_settings['Folder'].dragged_node = node;
console.log("Drag started for node:", node.label);
});
node.$a.on('dragover', function(e) {
e.preventDefault();
console.log("Drag over node:", node.label);
});
node.$a.on('drop', function() {
var dragged_node = frappe.treeview_settings['Folder'].dragged_node;
console.log("Drop event detected. Dragged Node:", dragged_node.label, " Dropped on:", node.label);
if (dragged_node.label !== node.label) {
frappe.call({
method: "dms_app.dms_app.dms_app.doctype.folder.folder.reorder_folders",
args: {
folder_name: dragged_node.label,
new_parent: node.label
},
callback: function(r) {
console.log("Backend response:", r);
if (!r.exc) {
frappe.msgprint("Folder reordered successfully!");
frappe.treeview_settings['Folder'].tree.load(); // Refresh tree view
} else {
frappe.msgprint("Error reordering folder.");
}
}
});
} else {
frappe.msgprint("Cannot move a folder into itself!");
}
});
}
};
};