0

我有一个包含两个的页面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()循环页面上出现的顺序？？？

4

1 回答 1

0

特别是，问题在于 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提交更改之前需要完成问题，以便PersistDocumentSelections方法评估它们

于 2013-08-01T13:10:33.360 回答