Question

我是jQuery的新手，任何帮助都会受到赞赏！

在我的页面中的无序列表之间对项目进行排序时，我希望隐藏的输入字段更新如下：

var Chris_Farley_Middle_School = $("#Chris_Farley_Middle_School").sortable('toArray');
$("input[name = Chris_Farley_Middle_School]").val(Chris_Farley_Middle_School);

当我在我的控制台中运行这两行时，他们会更新隐藏的字段，问题是当项目被排序时，我无法让它们运行。

This is the API I'm using

这就是我的网页来源：

<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Handle empty lists</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#John_Hopkins_High_School, #In_House, #Chris_Farley_Middle_School, #Adam_Sandler_Elementary_School { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
#John_Hopkins_High_School li, #In_House li, #Chris_Farley_Middle_School li, #Adam_Sandler_Elementary_School li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>
<script>
$(function() {
$( "ul.droptrue" ).sortable({
  connectWith: "ul"
});

$( "ul.dropfalse" ).sortable({
  connectWith: "ul",
  dropOnEmpty: false
 });

$( "#John_Hopkins_High_School, #In_House, #Chris_Farley_Middle_School, #Adam_Sandler_Elementary_School" ).disableSelection();

});

<!-->
This is where I cannot get the "sortChange" event to work for me
<!-->

$( ".ui-state-default" ).on( "sortchange", function( event, ui ) {

var Chris_Farley_Middle_School = $("#Chris_Farley_Middle_School").sortable('toArray');
$("input[name = Chris_Farley_Middle_School]").val(Chris_Farley_Middle_School);

var John_Hopkins_High_School = $("#John_Hopkins_High_School").sortable('toArray');
$("input[name = John_Hopkins_High_School]").val(John_Hopkins_High_School);

var Adam_Sandler_Elementary_School = $("#Adam_Sandler_Elementary_School").sortable('toArray');
$("input[name = Adam_Sandler_Elementary_School]").val(Adam_Sandler_Elementary_School);

var In_House = $("#In_House").sortable('toArray');
$("input[name = In_House]").val(In_House);

});




</script>
</head>
<body>
<p><a class="nav" href="/logout/">logout</a></p>

<p>John Hopkins High School</p>
    <ul id="John_Hopkins_High_School" class="droptrue">



    <li class="ui-state-default" id="Johnny_Appleseed">Johnny Appleseed</li>



    <li class="ui-state-default" id="Thomas_Tankengine">Thomas Tankengine</li>



</ul>


<p>In House</p>
    <ul id="In_House" class="droptrue">



    <li class="ui-state-default" id="Pippy_Longstocking">Pippy Longstocking</li>



    <li class="ui-state-default" id="Little_Red_Riding_Hood">Little Red Riding Hood</li>



</ul>


<p>Chris Farley Middle School</p>
    <ul id="Chris_Farley_Middle_School" class="droptrue">



    <li class="ui-state-default" id="Bart_Simpson">Bart Simpson</li>



    <li class="ui-state-default" id="Stan_Marsh">Stan Marsh</li>



    <li class="ui-state-default" id="Kyle_Brofloski">Kyle Brofloski</li>



    <li class="ui-state-default" id="Kenny_McCormick">Kenny McCormick</li>



    <li class="ui-state-default" id="Eric_Cartman">Eric Cartman</li>



</ul>


<p>Adam Sandler Elementary School</p>
    <ul id="Adam_Sandler_Elementary_School" class="droptrue">



    <li class="ui-state-default" id="Dexter">Dexter</li>



    <li class="ui-state-default" id="Mandark">Mandark</li>



</ul>


<br style="clear:both">
<form method="post" id="form2">


<input type="hidden" name="John_Hopkins_High_School" id="John_Hopkins_High_School" value="">



<input type="hidden" name="In_House" id="In_House" value="">



<input type="hidden" name="Chris_Farley_Middle_School" id="Chris_Farley_Middle_School" value="">



<input type="hidden" name="Adam_Sandler_Elementary_School" id="Adam_Sandler_Elementary_School" value="">


<input type="submit" value="save">
</form>
</body>
</html>

Answer 1

试试这个，

$(document).ready(function() {
    $(".selector").on("sortchange", function(event, ui) {
        var Chris_Farley_Middle_School = $("#Chris_Farley_Middle_School").sortable('toArray');
        $("input[name = Chris_Farley_Middle_School]").val(Chris_Farley_Middle_School);

        var John_Hopkins_High_School = $("#John_Hopkins_High_School").sortable('toArray');
        $("input[name = John_Hopkins_High_School]").val(John_Hopkins_High_School);

        var Adam_Sandler_Elementary_School = $("#Adam_Sandler_Elementary_School").sortable('toArray');
        $("input[name = Adam_Sandler_Elementary_School]").val(Adam_Sandler_Elementary_School);

        var In_House = $("#In_House").sortable('toArray');
        $("input[name = In_House]").val(In_House);

    });
});

FIDDLE

Answer 2

您没有在dom ready处理程序中添加排序更改处理程序，也必须更改使用的选择器

$(function () {
    $("ul.droptrue").sortable({
        connectWith: "ul"
    });

    $("ul.dropfalse").sortable({
        connectWith: "ul",
        dropOnEmpty: false
    });

    $("#John_Hopkins_High_School, #In_House, #Chris_Farley_Middle_School, #Adam_Sandler_Elementary_School").disableSelection();


    $(".ui-sortable").on("sortchange", function (event, ui) {

        var Chris_Farley_Middle_School = $("#Chris_Farley_Middle_School").sortable('toArray');
        $("input[name = Chris_Farley_Middle_School]").val(Chris_Farley_Middle_School);

        var John_Hopkins_High_School = $("#John_Hopkins_High_School").sortable('toArray');
        $("input[name = John_Hopkins_High_School]").val(John_Hopkins_High_School);

        var Adam_Sandler_Elementary_School = $("#Adam_Sandler_Elementary_School").sortable('toArray');
        $("input[name = Adam_Sandler_Elementary_School]").val(Adam_Sandler_Elementary_School);

        var In_House = $("#In_House").sortable('toArray');
        $("input[name = In_House]").val(In_House);

    });
});

演示：Fiddle

想要使用jQuery-ui更新（“sortChange”，..）事件的隐藏输入字段

2 个答案: