Reject invalid sortable item in sorted list

Question

I tried a lot of things, but failed :( I have two sortable lists related to each other. The list A item can accept any item in the list, but the list B can only accept an item that has class = 'ABC'

The code looks like

<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'm trying to do 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');
   }
}})

I ask you if I am mistaken, thanks

Answer 1

Instead, you can try using the receive event, although this is a little delayed and addClass does not 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/