Drop table rows into Fancytree?

Question

I had a previous post that was similar, but I've had more success since then. In the following example, my draggable divs are successfully dropping into the Fancytree. Knowing now that this is possible, I need to drop Datatable rows into it.

I initially had used the RowReordering plug in for drag and drop capability in DataTables, until I came across this demo: http://www.mccran.co.uk/examples/datatables-drag-drop/ which is instead using sortable on the tbody. So the Fancytree can accept outside drops, and the DataTable can drop outside the table - now to make them work together.

If you move the table rows and drop them within the table (in the demo), the sortable update does correctly alert. I also made an alternate drop target that works sometimes with the row drop. Any ideas? Thanks in advance

http://jsfiddle.net/s827x/43/

// make table rows draggable
    $("#pricetable tbody").sortable({
        cursor: "move",
        cursorAt: { top: -5, left: -5 },
        connectWith: "#tree", // not working
        connectToFancytree: true, // works for drag example below, but not here
        update: function(event, ui) {
            var id = ui.item.context.children[0].innerHTML;
            var title = ui.item.context.children[1].innerHTML;
            alert("Key: " +id + "\nTitle: " + title);
        }
    });

Answer 1

Solved it with draggable instead of sortable like the example above:

$('#pricetable').dataTable({
        "fnDrawCallback": function () {
            $("#pricetable tr").draggable({
                revert: true,
                cursor: "move",
                cursorAt: { top: -5, left: -5 },
                connectToFancytree: true
            });
        }
    });

http://jsfiddle.net/s827x/47/