Question

我有一个页面有两个asp:BulletedLists，一个可用的项目列表和一个选定的项目列表，一个是填充，另一个不是，我可以在它们之间拖放LI没问题。我使用两个隐藏字段来保存每个列表的内容，当我进行回发时，每个列表中的内容（从持久隐藏字段中读取）是正确的，但不是按用户选择的顺序，项目是在每个列表之间移动，在UI中，它们看起来按照用户在页面上定义的顺序，但是当我循环遍历DOM时，这种排序更改不会反映在.each()中方法

我的代码......

    $(function () {
        $("#<%= blAvailableDocuments.ClientID %>").sortable();
        $("#<%= blAvailableDocuments.ClientID %>").disableSelection();

        $("#<%= blSelectedDocuments.ClientID %>").sortable();
        $("#<%= blSelectedDocuments.ClientID %>").disableSelection();
    });

    $(function () {
        $("#<%= blAvailableDocuments.ClientID %>").draggable({
            drag: function (event, ui) {
                if (!ui.draggable[0].hasAttribute("ID")) {
                    return;
                }
            }
        });
        $("#<%= blAvailableDocuments.ClientID %>").droppable({
            drop: function (event, ui) {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target) {
                    Move(ui.draggable[0], source, target);
                }
            }
        });

        $("#<%= blSelectedDocuments.ClientID %>").draggable({
            drag: function (event, ui) {
                if (!ui.draggable[0].hasAttribute("ID")) {
                    return;
                }
            }
        });
        $("#<%= blSelectedDocuments.ClientID %>").droppable({
            drop: function (event, ui) {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target) {
                    Move(ui.draggable[0], source, target);
                }
            }
        });
    });

    function Move(element, source, target) {
        var newLI = document.createElement("li");
        var sourceBL = document.getElementById(source);
        var targetBL = document.getElementById(target);

        newLI.innerHTML = element.innerHTML;
        sourceBL.removeChild(element);
        targetBL.appendChild(newLI);

        PersistDocumentSelections();
    }

    function PersistDocumentSelections() {
        $("#<%= persistSelectedDocuments.ClientID %>").val("");
        $("#<%= blSelectedDocuments.ClientID %> li").each(function (index) {
            var value = $("#<%= persistSelectedDocuments.ClientID %>").val();
            value += $(this).text() + "|";
            $("#<%= persistSelectedDocuments.ClientID %>").val(value);
        });

        $("#<%= persistNonSelectedDocuments.ClientID %>").val("");
        $("#<%= blAvailableDocuments.ClientID %> li").each(function (index) {
            var value = $("#<%= persistNonSelectedDocuments.ClientID %>").val();
            value += $(this).text() + "|";
            $("#<%= persistNonSelectedDocuments.ClientID %>").val(value);
        });
    }

有没有办法在拖动/删除/重新排序项目时将更改提交到DOM，或检测它们在页面上显示.each()循环的顺序？？

Answer 1

特别是，问题是JQuery没有立即识别出自己的更新。解决方案是将隐藏字段的更新延迟几毫秒。

    drop: function (event, ui) {
        var source = ui.draggable[0].parentElement.id;
        var target = event.target.id;

        if (source != target) {
            Move(ui.draggable[0], source, target);
        }

        setTimeout(function () { PersistDocumentSelections(); }, 100);
    }

此外，不确定drop: function的执行是否继续超过setTimeout()调用，因此意味着问题是在为{提交更改之前完成所需的drop: function {1}}评估它们的方法

JQueryUI更改LI的顺序没有反映在JQuery .each（）上的DOM中

1 个答案: