I am experiencing a weird sortable bug:
everytime I clicked on Manual, It will append() the Manual tab html, which is a sortable <ul><li></li> ... </ul> list
after that if I drag any <li> item ( Example Item 2 ), the dragged element left + top offset values are wrong the first time:
if the dragged element is moved vertically to another position or stopped draggin, it works as expected
this is the javascript code snippet for the sortable list:
var tab_html = '<ul id="featured-sortable">'+
' <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>'+
' <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>'+
' <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>'+
' <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>'+
' <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>'+
' <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>'+
' <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>'+
'</ul>';
// Append New Last Child
$(this).closest('div.setting-item').append(tab_html);
/*
|==========================================================================
| Featured sortable
|==========================================================================
*/
$( function() {
$( "#featured-sortable" ).sortable({
// cursorAt: { top: 0, left: 0 },
start: function(e, ui)
{
console.log('ui.offset: ' + JSON.stringify(ui.offset, null, 2));
console.log('ui.position: ' + JSON.stringify(ui.position, null, 2));
console.log('ui.originalPosition: ' + JSON.stringify(ui.originalPosition, null, 2));
let target = $( event.target );
console.log('target.css(top): ' + target.css('top'));
console.log('target.css(left): ' + target.css('left'));
},
sort: function(e, ui)
{
let target = $( event.target );
console.log('target.css(top): ' + target.css('top'));
console.log('target.css(left): ' + target.css('left'));
// ui.originalPosition.top = target.css('top');
// ui.originalPosition.left = target.css('left');
}
}).disableSelection();
} );
// Refresh Featured-Sortable
$( "#featured-sortable" ).sortable( "refresh" );
