Drag and Drop events in dnd plugin in jstree are not getting called

Question

We are using jsTree for tree representation of the Files and folders. Files and folders can be moved in and out from other folders.

For this I have enabled the drag and drop plugin. The folders and files can be dragged and dropped but the events which are called on drag and drop are not getting called.

I need these events to fire on drag and drop as I need to update the status of the drag and drop in the backend using Ajax.

Please help

Below is the code.

<script type="text/javascript" class="source">

$(function() {

        $("#folderTree").jstree( {
        "dnd" : {
            "drop_finish" : function () { 
                alert("DROP"); 
            },
            "drag_check" : function (data) {
                if(data.r.attr("id") == "phtml_1") {
                    return false;
                }
                return { 
                    after : false, 
                    before : false, 
                    inside : true 
                };

                alert("hhh jjj kk ");
            },
            "drag_finish" : function () { 
                alert("DRAG OK"); 
            }
        },

        "plugins" : [ "core", "html_data", "themes", "ui","dnd"],

        "ui" : {
            "initially_select" : [ "phtml_1" ]
        },

        "core" : { "initially_open" : [ "phtml_1" ] },

        "themes" : {
                "theme" : "apple"
        },

        "types" : {
            "valid_children" : [ "root" ],
            "types" : {
                "root" : {
                    "icon" : { 
                        "image" : "../images/drive.png" 
                    },
                    "valid_children" : [ "folder" ],
                    "draggable" : false
                },
                "default" : {
                    "deletable" : false,
                    "renameable" : false
                },

                "folder" : {
                    "valid_children" : [ "file" ],
                    "max_children" : 3
                },
                "file" : {
                    // the following three rules basically do the same
                    "valid_children" : "none",
                    "max_children" : 0,
                    "max_depth" : 0,
                    "icon" : {
                        "image" : "../images/file.png"
                    }
                }

            }
        }



    });
});

Am I missing anything or is there anything else I need to do in order for the drag and drop events to get called?

Answer 1

Check with this URL Issue with JSTree drag drop Use class="jstree-drop" along with IDs for all the nodes. It will work. For example:- If you use json data

"plugins" : [ "core", "json_data", "themes", "ui","dnd"],
{
    {id : "id1",rel : "folder",class:"jstree-drop"},
    data:"New folder2",
    state:"closed"
}

if we use html data then add class="jstree-drop" to all nodes. Then "drop_finish" event will works fine, but not drag_check,drag_finish. I tried by adding jstree-drag in css class.

Updated (after one hour on 19th-July-2011):- add jstree-draggable css class to all elements drag events also works fine more information http://www.jstree.com/documentation/dnd