3

这应该是直截了当的，但是我在提醒我的可排序列表的顺序时遇到了真正的麻烦。

这是我正在使用的 JQuery 代码：

$(document).ready(function() {
    $("#projectItems").sortable({
        update : function(event, ui) {
            var order = $(this).sortable('toArray').toString();
            alert(order);

        }
    });
});

这是我的列表的 HTML：

<ul id="projectItems">
                    <li id="item1" value="<?php echo $studentChoice1; ?>">(1) <?php echo $title[1]; ?><a href='#message1' onclick='deleteProject(".$studentChoice1.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item2" value="<?php echo $studentChoice2; ?>">(2) <?php echo $title[2]; ?><a href='#message1' onclick='deleteProject(".$studentChoice2.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item3" value="<?php echo $studentChoice3; ?>">(3) <?php echo $title[3]; ?><a href='#message1' onclick='deleteProject(".$studentChoice3.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item4" value="<?php echo $studentChoice4; ?>">(4) <?php echo $title[4]; ?><a href='#message1' onclick='deleteProject(".$studentChoice4.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
                    <li id="item5" value="<?php echo $studentChoice5; ?>">(5) <?php echo $title[5]; ?><a href='#message1' onclick='deleteProject(".$studentChoice5.",".$userID.")'><img height=20px width=20px alt='Delete' src='img/delete.png' /></a></li>
</ul>

该列表是可排序的并且可以工作，但是当用户完成对项目的排序时，它根本不会显示警报消息。

非常感谢这里的任何帮助，因为我已经坚持了几天，似乎无法在线找到解决方案。

更新 问题似乎与引用jQuery有关

我正在使用的当前版本的 jQuery 是来自 google 的 CDN 的 1.7.1，在我的脚本中引用如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

但是，当我将其更改为：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

它根本不起作用！

另外，当我尝试像下面这样的引用时，它说有一个 jquery 引用错误！

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" href="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" href="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

我不知道如何解决这个问题，因为它似乎对其他人来说都很好！在这里的任何帮助将不胜感激。

4

3 回答 3

2

它工作正常，请在此处查看：http: //jsfiddle.net/DHJb7/

$(document).ready(function() {
$("#projectItems").sortable({
    update : function(event, ui) {
        var order = $(this).sortable('toArray').toString();
        alert(order);
    }
});
});

我认为您忘记包含 jQuery 或 jQueryUI 库。如果您已包含它们，请检查库的版本。

推荐版本： jQuery 1.9.1 和 jQueryUI 1.9.2

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" href="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" href="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
于 2013-02-27T12:34:05.933 回答
0

看看这个小提琴链接，它对我来说工作正常。

         $("#projectItems").sortable({
                update: function (event, ui) {
                    var order = $(this).sortable('toArray').toString();
                    alert(order);

                }
          });

我希望这会对你有更多帮助。

于 2013-02-27T12:36:55.830 回答
0

它应该工作。添加 jquery ui 和 jquery 库。只是要清楚，您需要更改项目的位置（通过拖放）以调用所需的功能（更新）。

于 2013-02-27T12:37:06.940 回答