Question

我在使用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）内部的click处理程序中添加代码，之后没有运气。

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

非常感谢任何帮助。

Answer 1

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

Answer 2

理想情况下应该是

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

如果您已浏览过Jquery UI可排序文档。

Answer 3

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

使用以下方法删除了JScrollPanes以及所有内容：

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

填充动态数据的可排序列表

3 个答案: