0

我在让 JQuery-UI 交互在我的页面上工作时遇到了一点问题。我以前没有使用过 JQuery-UI，所以我开始尝试可排序的交互，希望以后可以拖放和排序。但是，我一直在用头撞墙，甚至无法使可排序的工作正常进行。

我正在尝试排序的内容正在使用 ajax 动态加载。以下是内容外观的表示：

<ul id="category_list">
    <li class="category" data-category-id="17">Education</li>
    <li class="category" data-category-id="20">General Information</li>
    <li class="category" data-category-id="14">Music / Movies / Television</li>
    <li class="category" data-category-id="18">Navigation</li>
    <li class="category" data-category-id="19">Retailers</li>
    <li class="category" data-category-id="16">Social Media</li>
    <li class="category" data-category-id="15">Web Results</li>
</ul>

这个 JQuery 函数加载数据：

// load all the engines in a category
$('#container').on("click", ".buttonclass", function() {
    $.get("/categories", {
      id : $(this).attr('data-id')
      }, function(data) {
          var pane = $("#categories").data('jsp');
          pane.getContentPane().html(data);
          pane.reinitialise();
      });
});

（与窗格相关的东西是因为它可以由 JScrollPane 滚动）。我尝试在上面的这个函数中添加代码以使列表元素可排序，但没有任何效果。我尝试过的一些事情是：

$('.category').sortable();
...
$('.category'.each(function(){$(this).sortable()};
...
$("#category_list").sortable();
...
$('.category').sortable('refresh');
...
$('.category'.each(function(){$(this).sortable('refresh')};
...
$("#category_list").sortable('refresh');

我尝试将代码添加到回调函数（$.get）内部和之后的点击处理程序，但没有运气。

在页面中（在 JscrollPane 内）硬编码的静态数据没有问题排序。只是动态内容造成了麻烦。

任何帮助将不胜感激。

4

3 回答 3

0

看看这个 jquery-ui文档并在jqfaq.com上对相同元素进行排序和拖动。希望，这可能对你有所帮助。

于 2013-01-09T08:19:56.533 回答
0

理想情况下应该是

$("#category_list").sortable();

如果您浏览过 Jquery UI Sortable docs 。

于 2013-01-09T08:20:26.870 回答
0

找出问题所在，它是 JScrollPane。尽管 JScrollpane 在静态数据和可排序/可拖动/可放置方面没有问题，但在动态填充它时似乎会引起问题。

删除了 JScrollPanes 和所有如果可以使用：

$("#category_list").sortable();
于 2013-01-10T04:56:25.637 回答