使用JQuery对列表项进行排序

Question

我正在尝试使用JQuery UI Sortable插件，允许用户通过用鼠标拖动来更改顺序或列表项。有问题的页面可用here。

相关的JQuery代码在webapp.js

中

$("#preferences_list").sortable({
            placeholder: "placeholder",
            forcePlaceholderSize: true,
            update: function(event, ui) {
                var order = $(this).sortable("serialize", {key:'list'});
                $.post("/mypreferences/reorder/", order);
            }
        });
$("#preferences_list").disableSelection();

这应该允许用户通过使用向上或向下拖动类别来重新排序类别（当在新位置删除类别时，会触发AJAX请求。）

上面的代码与sortable plugin's demo page上显示的代码相同，但出于某种原因，它根本无法正常工作

Answer 1

你在widget.js之前加载了sortable.js。可排序取决于小部件，因此必须首先包含widget.js。只需重新排序脚本标记。

Answer 2

可能还有其他问题，但首先要改变：

<script type="text/javascript" src="myPreferences_files/jquery-ui-sortable-1.js"></script> 
<script type="text/javascript" src="myPreferences_files/jquery-ui-widget-1.js"></script> 

为：

<script type="text/javascript" src="myPreferences_files/jquery-ui-widget-1.js"></script> 
<script type="text/javascript" src="myPreferences_files/jquery-ui-sortable-1.js"></script> 

Answer 3

在您创建的页面上查看Firebug：有4个错误。例如：

  

jquery-ui-sortable-1.js：17 - 未捕获TypeError：对象函数（a，b）{return new e.fn.init（a，b，h）}没有方法'widget'

你确定你有 jquery.ui.widget.js 吗？