0

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

我究竟做错了什么？

下面的代码

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%;
}

谢谢。

4

1 回答 1

0

似乎这是一个jqueryui错误，一年前被认为是 notabug

似乎原因是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()
        }
    });
});

看看这个像你想要的那样工作的小提琴！

于 2013-10-24T08:23:11.470 回答