jQuery shuffle插件打破了jQuery-UI sortables

时间:2011-02-17 13:37:18

标签: jquery jquery-ui jquery-ui-sortable shuffle

我发现了一个jQuery shuffle插件的问题。它打破了我的嵌套可排序列表。在底部,我放置了一个演示问题的演示链接,如下所述。

html很简单,有一个包含四个列表项的有序列表。这些列表项中的每一个都包含一个包含两个列表项的无序列表。并且底部有一个按钮可以对有序列表进行洗牌。

  <ol> 
    <li> 
      <ul> 
        <li>Item A</li> 
        <li>Item B</li> 
      </ul> 
    </li> 
    <li> 
      <ul> 
        <li>Item C</li> 
        <li>Item D</li> 
      </ul> 
    </li> 
    <li> 
      <ul> 
        <li>Item E</li> 
        <li>Item F</li> 
      </ul> 
    </li> 
    <li> 
      <ul> 
        <li>Item G</li> 
        <li>Item H</li> 
      </ul> 
    </li> 
  </ol> 
  <button type="button" class="shuffle">Shuffle</button>

有序列表是可排序的,无序列表也是可排序和连接的(例如,我可以在“项目G”下面移动“项目A”)。到目前为止,太棒了!

$(document).ready(function () {

  $('ol').sortable({
    placeholder: 'dashed'
  });
  $('ul').sortable({
    placeholder: 'dashed',
    connectWith: 'ul'
  });
  $('.shuffle').button().click(function(){
    $('ol').shuffle();
  });

});

随机播放按钮(差不多)按照我的预期做,它会对有序列表进行洗牌(而不是无序!)。但正如它那样,它也打破了无序的可排序列表。在我改组之前,我不再能够移动元素了。

我做错了吗?插件中是否有错误?

链接到插件:http://yelotofu.com/labs/jquery/snippets/shuffle/jquery.shuffle.js

链接到问题演示:http://jsbin.com/umeju6

1 个答案:

答案 0 :(得分:0)

经过一些测试后,我发现这样做有效:

$(document).ready(function () {

  $('ol').sortable({
    placeholder: 'dashed'
  });
  $('ul').sortable({
    placeholder: 'dashed',
    connectWith: 'ul'
  });
  $('.shuffle').button().click(function(){
    $('ul').sortable("destroy");
    $('ol').shuffle();
    $('ul').sortable({
      placeholder: 'dashed',
      connectWith: 'ul'
    });
  });

});

不确定为什么。它也不是一个非常优雅的解决方案。