I have attempted various strategies, but unfortunately without success. My current challenge involves two sortable lists that are interconnected. List 'A' is configured to accept any list item, while list 'B' will only receive items with the class 'abc.'
The HTML code snippet is shown below:
<ul id='A'>
<li>item A1</i>
<li>item A2</i>
<li class='abc'>item A3</i>
</ul>
<ul id='B'>
<li class='abc'>item A1</i>
</ul>
My jquery implementation is as follows:
$('#A').sortable({revert: true, connectWith: '#B'})
$('#B').sortable({revert: true, connectWith: '#A', over: function(event, ui){
if(!ui.item.hasClass('abc')){
ui.placeholder.addClass('ui-state-error');
ui.sender.sortable('cancel');
}
}})
I would appreciate any guidance on where I may be going wrong. Thank you.