value of jquery sortable

本文关键字：sortable jquery of value 更新时间：2023-09-26

我有一个列表，每个列表都有一个值。我想在我整理后，将隐藏的值发送给一些输入

可排序对象运行良好，但我无法获得可排序对象之后（和之前）的值。。

这是我的代码：

<input type="hidden" name="op" id="op" value="" />
<div class="wpr">
    <div class="wprCntnt">
        <ul id="sortable">
            <li class="ui-state-default" id="1" value="1" >Item 1</li>
            <li class="ui-state-default" id="2" value="2" >Item 2</li>
            <li class="ui-state-default"id="3" value="3" >Item 3</li>
            <li class="ui-state-default"id="4" value="4" >Item 4</li>
            <li class="ui-state-default"id="5" value="5" >Item 5</li>
            <li class="ui-state-default"id="6" value="6" >Item 6</li>
            <li class="ui-state-default"id="7" value="7" >Item 7</li>
        </ul>
         <input type="submit" value="submit" onclick="sayvalue()" />
    </div>       
</div>
$(function () {
    var op = $("#op");
    var lengthi = $(".ui-state-default").length;
    var valueSchtick = "";
    for (var i = 0; i < $(".ui-state-default").length; i++) {
        valueSchtick += op.val() + "," + $('.ui-state-default').eq(i).val();
        //        op.val(op.val() + ',' + $('.ui-state-default').attr('id'));
        //  op.val() = valueSchtick;
    }
    //   $("#op").val() = valueSchtick
    var sortableLinks = $("#sortable");
    sortableLinks.sortable({
        placeholder: "ui-state-highlight1"
    });
    var linkOrderData = $($("#sortable")).sortable("serialize");
    $("#sortable").disableSelection();
});

我希望我正确理解你：

$(function () {
    var linkOrderData;
    var op = $("#op");
    var sortableLinks = $("#sortable");
    var setValues = function(){
        linkOrderData = sortableLinks.sortable("toArray");
        var values = new Array();
        $.each(linkOrderData, function(index, value){
            values.push($('#'+value).val());
        });
        values = values.toString();
        op.val(values);
    }
    sortableLinks.sortable({
        placeholder: "ui-state-highlight1",
        update: function(event, ui) {
            setValues();
        }
    });

    setValues();
    sortableLinks.disableSelection();
});

检查JSFiddle