拒绝可排序列表中的无效可排序项

Question

我尝试了很多但没有成功的事情:(我有两个相互连接的可排序列表.事情是列表'A'可以接受其中的任何列表项.但是列表'B'只能接受一个具有class ='abc'的项目

代码是

<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>

我正在尝试的jquery代码是

$('#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');
   }
}})

请指导我错在哪里,谢谢

Answer 1

您可以尝试使用接收事件，尽管这样做有点延迟并且 addClass 不起作用：

\n\n

$(\'#A\').sortable({revert: true, connectWith: \'#B\'})\n$(\'#B\').sortable({revert: true, connectWith: \'#A\',\n    receive: function(event, ui){\n        if(!ui.item.hasClass(\'abc\')){   \n            $(ui.placeholder).addClass(\'ui-state-error\');                    \n            $(ui.sender).sortable(\'cancel\');\n        }}\n})\xe2\x80\x8b;\xe2\x80\x8b\n

\n\n

示例 - http://jsfiddle.net/b5ykK/1/

\n