I tried many things but not successful :( I have two sortable lists connected with each other. The thing is list 'A' can accept any list item in it. But list 'B' can only accept an item having class = 'abc'
The code is as
<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>
The jquery code I am trying is
$('#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');
}
}})
Please guide me where I am wrong, thanks
You could try using the receive event instead, although it's a bit delayed doing this and the addClass doesnt work:
$('#A').sortable({revert: true, connectWith: '#B'})
$('#B').sortable({revert: true, connectWith: '#A',
receive: function(event, ui){
if(!ui.item.hasClass('abc')){
$(ui.placeholder).addClass('ui-state-error');
$(ui.sender).sortable('cancel');
}}
});
Example - http://jsfiddle.net/b5ykK/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With