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"
});