jQuery shuffle 插件破坏了 jQuery-UI 可排序

Question

我发现的 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>

有序列表是可排序的，无序列表也是可排序和连接的(例如，我可以将“项目 A”移动到“项目 G”下方)。到目前为止，一切顺利!

$(document).ready(function () {

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

});

随机播放按钮(几乎)按照我的预期进行操作，它会随机播放有序列表(而不是无序列表!)。但这样做的同时，它也破坏了无序的可排序列表。我不再能够像洗牌之前那样移动元素。

我做错了什么吗？插件有bug吗？

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

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

Answer 1

经过一些测试，我发现这样做是有效的:

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

});

但不知道为什么。这也不是一个非常优雅的解决方案。