Dragging from jQuery DataTables to jQuery nestedSortable

Question

I am trying to drag between a jQuery DataTable and a jQuery nestedSortable. The problem is that when I drop my draggable object (from the DataTable), it reverts to a table row, instead of the li object (to fit into the nestedSortable). An example jsFiddle is here. My ideal scenario is like this jQuery UI example, but with the source being a datatable and the target being a nestedSortable...

I found this fix to connect the two elements by creating my own "connectWith" option for the draggable plugin, so I can drop from the table into the sortable.

I have also figured out how to use a custom helper to make the placeholder appear as if it were an li object, but I can't figure out how to get the drop object to be equal to the helper, instead of the original table row. I have tried playing with things in the .draggable(stop), .nestedSortable(stop), and .nestedSortable(receive) events, but no luck. Could someone please point me in the right direction? Am I missing something in the docs?

Thanks! Happy holidays to anyone who is actually reading this...

My basic code:

$('#example_table').dataTable({
    'sPaginationType': 'full_numbers',
    'bJQueryUI':true
});

$('ol.sortable').nestedSortable({
    forcePlaceholderSize: true,
    handle: '.disclose',
    helper: 'clone',
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: true,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    maxLevels: 4,
    isTree: true,
    expandOnHover: 700,
    startCollapsed: true,
    stop: function(e, ui) {
    },
    connectWith: '#example_table',
    receive: function( e, ui ) {
    }
});

$( '#example_table > tbody > tr').draggable({
    connectToNestedSortable: "#structure",
    helper: function( event ) {
        var _this = $(this);
        var name_col = _this.find('.name_col')
        .children('span');
        var name = name_col.text();
        var new_ele = $('<li></li>')
            .addClass('mjs-nestedSortable-branch')
            .addClass('mjs-nestedSortable-collapsed')
            .append('<div></div>')
            .append('<span><i class="fa fa-plus"></i></span>' + name);
        return new_ele.clone();
    },
    revert: "invalid",
    stop: function ( event, ui ) {
        $(ui.item).replaceWith(ui.helper);
    }
});

---

UPDATE

I know there are lots of threads on how to change the draggable object in jQuery, so just to document some of what I have tried (that hasn't worked):

Attaching to the sortable stop method, with a custom class that flags the dropped item.

stop: function(e, ui) {
    if (ui.item.hasClass('fromtable')) {
        //clone and remove positioning from the helper element
        var newDiv = $(ui.helper).clone(false)
        .removeClass('fromtable');

        ui.item.replaceWith(newDiv);
    }
},

Using the sortable update event:

update: function(e, ui) {
    if (ui.item.hasClass('fromtable')) {
        //clone and remove positioning from the helper element
        $(this) = $(ui.helper).clone(false)
        .removeClass('fromtable');
    }
},

Using both droppable and nestedSortable (this leaves ghosting, but it does drop something that looks like the li...may be in the right direction):

$('ol.sortable').droppable({
    drop: function(e, ui) {
        var new_item = ui.helper.clone();
        $(this).append(new_item);
    }
}).nestedSortable({etc...

Answer 1

Ok, so playing around with the first other SO question I linked to, the issue is that I was trying to clone the ui.helper object, assuming that it would still be present (since the draggable helper was working). However, it appears that the nestedSortable ui.helper object is null (and not automatically equal to the draggable ui.helper object like I thought), so I had to reconstruct the helper object in the stop method. My final code looks like below (need to clean up the redundancy), and works at the jsFiddle here.

$('#example_table').dataTable({
    'sPaginationType': 'full_numbers',
    'bJQueryUI':true
});

$('ol.sortable').nestedSortable({
    forcePlaceholderSize: true,
    handle: '.disclose',
    helper: 'clone',
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    maxLevels: 4,
    isTree: true,
    expandOnHover: 700,
    startCollapsed: true,
    stop: function(e, ui) {
        if (ui.item.hasClass('odd') || ui.item.hasClass('even')) {
            var _this = $(ui.item);
            var name_col = _this.find('.name_col')
                .children('span');
            var name = name_col.text();
            var new_ele = $('<li></li>')
                .addClass('mjs-nestedSortable-branch')
                .addClass('mjs-nestedSortable-collapsed')
                .append('<div></div>')
                .append('<span class="disclose"><i class="fa fa-plus"></i></span>' + name);
            ui.item.replaceWith(new_ele);
        }
    },
    connectWith: '#example_table',
    receive: function( e, ui ) {
    }
});

$( '#example_table > tbody > tr').draggable({
    connectToNestedSortable: "#structure",
    helper: function( event ) {
        var _this = $(this);
        var name_col = _this.find('.name_col')
            .children('span');
        var name = name_col.text();
        var new_ele = $('<li></li>')
            .addClass('mjs-nestedSortable-branch')
            .addClass('mjs-nestedSortable-collapsed')
            .append('<div></div>')
            .append('<span><i class="fa fa-plus"></i></span>' + name);
        return new_ele.clone();
    },
    revert: "invalid"
});