Using Drag&Drop with jsTree and DataTables

Question

I've got a jsTree and a DataTable. I'm trying to copy nodes that I've dragged from my tree to a cell in my table. Is something like that possible at all?

It doesn't even show the alerts

This is in my html :

<li id="tree1" class="jstree-draggable">

</li>

<table id="table">
    <thead>
        <tr>
            <th>1 Column</th>
            <th>2 Column</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

This is my js :

$(document).ready(function() {

    $("#tree1").jstree({
        // List of active plugins
        "plugins" : ["themes", "html_data", "dnd"],
        "html_data" : {
            "data" : "<li id='root'><a href='#'>Parent node</a><ul><li><a href='#'>Child node</a></li></ul></li>"
        },
        "themes" : {
            "theme" : "default",
            "dots" : true,
            "icons" : true
        },
        "dnd" : {
            "drop_finish" : function() {
                alert("DROP");
            },
            "drag_check" : function() {

            },
            "drag_finish" : function (data) {
                alert("DRAG FINISH");
            }
        },
        "core" : {
            "initially_open" : ["root"]
        }
    });

    $('#table').dataTable({
        "bPaginate" : false,
        "bSort" : false,
        "bInfo" : false,
        "bFilter" : false
    });
});

I've got a second tree (which is essentially the same) and drag & drop between the two of them works (unless I try to drop a child element on one of its own parent elements in which case the whole tree disappears but that is not my main issue right now)

I have tried the answer on this thread but it still didn't even show the alerts.

Any help on howto solve this problem is greatly appreciated (it doesn't have to use jstree, it's just what I happened to find)

Answer 1

The drop callback is called when something is dropped inside the tree itself .. to achieve what you are trying you have to mark your table as "droppable" and allow dragging and dropping elements inside .. This is a plugind that is part of Jquery UI . use this documentation to do that ..

Droppable Documentation