CODEWITHSUNDEEP
javascriptjstree
ajm
ajm

Reputation: 13233

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

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?

Upvotes: 7

Views: 21076

Answers (3)

verybadbug
verybadbug

Reputation: 929

Options dnd.drag_check, dnd.drag_finish, dnd.drop_finish is uses for foreign objects. For manage moving inside one tree (or between trees) use crrm.move.check_move.

Upvotes: 1

Naga Harish M
Naga Harish M

Reputation: 2789

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

Upvotes: 6

bjornd
bjornd

Reputation: 22951

If you want to drag nodes inside of the tree you should use CRRM plugin, not DND. DND is used to drag nodes outside the tree or between the trees.

Upvotes: 3

Related Questions