Getting SoucreNode values in a Dynatree when items dropped from non-Dynatree droppable.

[chaitany...@gmail.com]

This is my sample HTML :

<table>
    <tbody>
        <tr valign="top">
            <td>
                <div id="tree2"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div>Active node: <span id="echoActive">-</span></div>
            </td>
            <td>
                <div>Active node: <span id="echoActive2">-</span></div>
            </td>
        </tr>
    </tbody>
</table>
<div id="draggableSampletttt" class="ui-widget-content">
    <table id="sortable" class="table" style="margin:10px 0 0 0;">
        <thead>
            <tr>
                <th>

                </th>
                <th>
                    Column1
                </th>
                <th>
                    Column2
                </th>
                <th>
                    Column3
                </th>
                <th>
                    Column4

                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="myDragClass">
                <td><input type="checkbox" /> </td>
                <td>One</td>
                <td>One</td>
                <td>One</td>
                <td>One</td>
            </tr>
            <tr class="myDragClass">
                <td><input type="checkbox" /> </td>
                <td>two</td>
                <td>two</td>
                <td>two</td>
                <td>two</td>
            </tr>
            <tr class="myDragClass" id="geoff" data-geoff="Hahaha">
                <td><input type="checkbox" /> </td>
                <td>three</td>
                <td>three</td>
                <td>three</td>
                <td>three</td>
            </tr>
            <tr class="myDragClass">
                <td><input type="checkbox" /> </td>
                <td>four</td>
                <td>four</td>
                <td>four</td>
                <td>four</td>
            </tr>

        </tbody>
    </table>
    </div>


and below is the javascript : 

<script type="text/javascript">
        $(function () {

            $("#tree2").dynatree({
                initAjax: {
                    url: "sample-data3.json"
                },
                onLazyRead: function (node) {
                    // Mockup a slow reqeuest ...
                    node.appendAjax({
                        url: "sample-data2.json",
                        debugLazyDelay: 750 // don't do thi in production code
                    });
                },


                onLazyRead: function (node) {
                    node.appendAjax({
                        url: "sample-data2.json"
                    });
                },
                dnd: {
                    autoExpandMS: 1000,
                    preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                    onDragEnter: function (node, sourceNode) {
                        /* sourceNode may be null for non-dynatree droppables.
                         * Return false to disallow dropping on node. In this case
                         * onDragOver and onDragLeave are not called.
                         * Return 'over', 'before, or 'after' to force a hitMode.
                         * Any other return value will calc the hitMode from the cursor position.
                         */
                        logMsg("draggableSampletttt.onDragEnter(%o, %o)", node, sourceNode);
                        // For the sake of this example deny dropping over folders
                        if (node.data.isFolder) {
                            return false;
                        }
                        return true;
                        //                return "over";
                    },
                    onDragOver: function (node, sourceNode, hitMode) {
                        /* Return false to disallow dropping this node.*/
                        //               if(node.data.isFolder){
                        //                   var dd = $.ui.ddmanager.current;
                        //                   dd.cancel();
                        //                   alert("folder");
                        //               }
                        logMsg("draggableSampletttt.onDragOver(%o, %o, %o)", node, sourceNode, hitMode);
                    },
                    onDrop: function (node, sourceNode, hitMode, ui, draggable) {
                        /* This function MUST be defined to enable dropping of items on the tree.
                         * sourceNode may be null, if it is a non-Dynatree droppable.
                         */
                        alert(sourceNode);
                        logMsg("draggableSampletttt.onDrop(%o, %o)", node, sourceNode);
                        var copynode;
                        if (sourceNode) {
                            copynode = sourceNode.toDict(true, function (dict) {
                                dict.title = "Copy of " + dict.title;
                                delete dict.key; // Remove key, so a new one will be created
                            });
                        } else {
                            copynode = { title: "This node was dropped here (" + ui.helper + ")." };
                        }
                        if (hitMode == "over") {
                            // Append as child node
                            node.addChild(copynode);
                            // expand the drop target
                            node.expand(true);
                        } else if (hitMode == "before") {
                            // Add before this, i.e. as child of current parent
                            node.parent.addChild(copynode, node);
                        } else if (hitMode == "after") {
                            // Add after this, i.e. as child of current parent
                            node.parent.addChild(copynode, node.getNextSibling());
                        }
                    },
                    onDragLeave: function (node, sourceNode) {
                        /** Always called if onDragEnter was called.
                         */
                        logMsg("draggableSampletttt.onDragLeave(%o, %o)", node, sourceNode);
                    }
                }
            });


                $('#sortable tr').draggable({
                    //      revert: "invalid", // slide back, when dropping over non-target
                    revert: function (dropped) {
                        // Return `true` to let the helper slide back.
                        if (typeof dropped === "boolean") {
                            // dropped == true, when dropped over a simple, valid droppable target.
                            // false, when dropped outside a drop target.
                            return !dropped;
                        }
                        // Drop comes from another tree. Default behavior is to assume
                        // a valid drop, since we are over a drop-target.
                        // Therefore we have to make an extra check, if the target node
                        // was rejected by a Dynatree callback.
                        var helper = $.ui.ddmanager && $.ui.ddmanager.current && $.ui.ddmanager.current.helper;

                        var isRejected = helper && helper.hasClass("dynatree-drop-reject");

                        return isRejected;
                    },
                    connectToDynatree: true,
                    cursorAt: { top: -5, left: -5 },
                    helper: function () {
                        var selected = $('#sortable input:checked').parents('tr');

                        if (selected.length === 0) {
                            selected = $(this);
                        }

                        //var sel = selected.find('input:checked');
                        //var geoff = document.getElementById("geoff");
                       // alert(selectValues);
                        var container = $('<div/>').attr('id', 'sortable');
                        container.append(selected.clone(true));

                        return container;
                    }
                });

                $("#skinCombo")
                    .val(0) // set state to prevent caching
                    .change(function () {
                        var href = "../src/"
                            + $(this).val()
                            + "/ui.dynatree.css"
                            + "?reload=" + new Date().getTime();
                        $("#skinSheet").attr("href", href);
                    });

            });
        </script> 


Explanation : 

The user can select rows from the table by checking the checkbox and drag them to the dyna tree. My requirement is to add the dragged items to the dyna tree.

How can I get SourceNode values?

[chaitanya gundeti]

 var treeData = [
        { title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
       
        {
            title: "Folder", isFolder: true, key: "id3",
            children: [
                {
                    title: "Sub-item 3.1",
                    children: [
                        { title: "Sub-item 3.1.1", key: "id3.1.1" },
                        { title: "Sub-item 3.1.2", key: "id3.1.2" }
                    ]
                },
                {
                    title: "Sub-item 3.2",
                    children: [
                        { title: "Sub-item 3.2.1", key: "id3.2.1" },
                        { title: "Sub-item 3.2.2", key: "id3.2.2" }
                    ]
                }
            ]
        },
        {
            title: "Document with some children ()", key: "id4", expand: true,
            children: [
                {
                    title: "Sub-item 4.1 ()", activate: true,
                    children: [
                        { title: "Sub-item 4.1.1", key: "id4.1.1" },
                        { title: "Sub-item 4.1.2", key: "id4.1.2" }
                    ]
                },
                {
                    title: "Sub-item 4.2 ()", select: true,
                    children: [
                        { title: "Sub-item 4.2.1", key: "id4.2.1" },
                        { title: "Sub-item 4.2.2", key: "id4.2.2" }
                    ]
                },
                { title: "Sub-item 4.3 ()", hideCheckbox: true },
                { title: "Sub-item 4.4 ()", unselectable: true }
            ]
        }
        ];

 

<script type="text/javascript">
        $(function () {

            $("#tree2").dynatree({

               children: treeData,