I am faced with a challenge regarding nested lists, specifically when it comes to preventing parent-parent list items from dropping into an inner <div> within an <li> <div> that already contains its own <ul> <li> list. Additionally, the placeholder seems to be causing some confusion. I am curious if there is a method to ensure that items belonging to the first list remain in their respective positions, even if they are dragged above another nested list within the main global list.
Any assistance on this matter would be greatly appreciated.
Utilizing jQuery:
$(document).ready(function () {
$('ul#main-sections').sortable({
connectWith: 'ul#main-sections',
items: 'li:not(:last-child)',
placeholder: 'placeholder',
forcePlaceholderSize: true,
start: function (e, ui) {
var elementHeight = ui.item.height();
ui.placeholder.height(elementHeight);
}
});
});
To view the issue, visit my http://jsfiddle.net/wt4N8/1/ <-- drag summary over books section and observe the behavior.