Drag and Drop for Tree view

[Nanaji]

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!");
            }
        });
    }
};

};