添加或删除 jQuery 可排序元素并记住顺序答案

【问题标题】：Add or Delete jQuery sortable element and remember order添加或删除 jQuery 可排序元素并记住顺序
【发布时间】：2016-01-15 12:33:58
【问题描述】：

我正在我的一个 Wordpress 元框中实现类似于 this 的东西。用户应该能够添加和删除 jquery-ui 可排序元素并记住元素的位置（顺序）存在。

我已经知道如何在通过拖放操作元素时记住位置（顺序）。

jQuery(document).ready(function () {
    jQuery('ul').sortable({
        stop: function (event, ui) {
            var data = jQuery(this).sortable('toArray');
            jQuery('#elements-order').val(data);
        }
    });
});

这将输出一个数组，其中包含类似1,2,3,5,4的顺序但是，当添加新元素或删除元素时，如何让这段代码运行以记住新元素的顺序。

这是我用来添加元素的代码

jQuery(document).ready(function () {;
        var wrapperSize = jQuery("#element-area-top").width();
        (function () {
            jQuery(".add-element").on("click", ".add-item", function () {

                var start = jQuery("#sortable"),
                selectBoxVal = jQuery("#element-list").val();

                var element = null;

                element = ('<li></li>');      
                var newRow = jQuery(element);
                jQuery(start).append(newRow);

                jQuery("#elements-order").val(jQuery('#elements-order').val() + i+',');

        });
})();

这是我用来删除元素的代码

jQuery("#sortable").on("click", ".delete", function () {
    jQuery(this).parents(/*someelement*/).remove();
});

那么，有谁知道该怎么做？

【问题讨论】：

你能提供一个 JSFiddle 演示你的问题吗？ :)
不，实际上，我的问题不在 JS 范围内。这是关于保存订单新添加的元素。我已经制作的内容与我向您展示的 Fiddle 具有完全相同的功能。但是，如何在 Wordpress 数据库中保存位置？
Ajax 更改订单...javascript 数组 POST...序列化为字符串...保存到 DB...？
是的，这就是我想要的......但是如何？

标签： javascript jquery html wordpress jquery-ui

【解决方案1】：

您也可以在添加/删除函数中获得具有相同逻辑的排序顺序（只需将其替换为“#ul”）。

var data = jQuery('#ul').sortable('toArray');
jQuery("#elements-order").val(data);

或者更好的是，将上面的代码放在一个通用函数中，然后调用通用函数。这里更新了fiddle，展示了相同的内容。

【讨论】：

哇，这正是我想要的。：）太感谢了。我正在努力如何在我的删除功能下使用该 loadSortOrder() 。再次感谢！