在可排序列表中拒绝无效的可排序项目 [英] reject invalid sortable item in a sortable list

问题描述

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

代码如下：

 < ul id ='A'> 
< li>项目A1< / i> 
< li>项目A2< i> 
< li class ='abc'>项目A3< ; / i> 
< / ul> 
 
< ul id ='B'> 
< li class ='abc'> item A1< / i> ; 
  
  

我正在尝试的jquery代码是

$ b $ $ $ p $ $ $ $ $ $''''。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'）;
}
}}）

请引导我wh我错了，谢谢解决方案您可以尝试使用接收事件，虽然它有点延迟做这个和addClass不工作：

  $（'＃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'）; 
}} 
}）; 
  

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

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/

这篇关于在可排序列表中拒绝无效的可排序项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！