Question

您好我正在使用jQuery在多个列表之间进行排序。当我将多个选项卡列表连接在一起时，会出现此问题。显示所需的行为是这个小提琴http://jsfiddle.net/vmV6F/。（只需将一个单词从一个标签拖到上一句中的所需位置）。但正如你在这个小提琴http://jsfiddle.net/prQCR/中看到的那样，只要我添加类.con来连接第二个和第三个标签，我就不能再将任何标签容器中的任何单词移动到第一个或第二个位置。< / p>

我做错了什么？

下面的代码

HTML

<div id="sen" class="con">
    <p>The</p>
    <p>cat</p>
    <p>was</p>
    <p>very</p>
    <p>bad</p> 
</div>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">one</a></li>
    <li><a href="#tabs-2">two</a></li>
    <li><a href="#tabs-3">three</a></li>
  </ul>

  <div id="tabs-1" class="con">
      <p>one</p>
      <p>one</p>
      <p>one</p>
      <p>one</p>
  </div>

  <div id="tabs-2" >
     <p>two</p>
      <p>two</p>
      <p>two</p>
  </div>

  <div id="tabs-3"  >
    <p>three</p>
     <p>three</p>
     <p>three</p>
  </div>

的jQuery

$(function() {
    $("#sen, #tabs-1, #tabs-2, #tabs-3").sortable({
        connectWith: ".con"
    }).disableSelection();
 });

$(function() {
    $("#tabs").tabs();
});

CSS

#sen {
    width: 978px;
    height: 200px;
    border: 2px solid black;
    padding-left: 11px;
    padding-right: 11px;
}

#sen p {
    float: left;
    padding-left: 9px;
    padding-right: 9px;
    font-family: Verdana;
    font-size: 50px;     
}

#tabs-1 p, #tabs-2 p, #tabs-3 p  {
    float: left;
    padding: 5px;
    font-size: 20px; 
}

#tabs  {
   float: left;
   width: 100%;
}

感谢。

Answer 1

看起来像是一个jqueryui bug，被认为是一年前的错误

似乎隐藏标签上display: none的原因是混淆了sortable插件

我看到的最佳解决方法是为当前打开的标签重新激活sortable，如下所示：

function activateSortable() {
    $(".con").sortable({
        connectWith: ".con"
    }).disableSelection();
};

$(function() {
    $("#tabs").tabs({
        activate: function(event,ui){
            ui.newPanel.addClass('con')
            ui.oldPanel.removeClass('con')
            activateSortable()
        }
    });
});

查看符合您需要的fiddle！

可排序不使用标签

1 个答案: