Shopify 可排序新位置

Question

我正在尝试将我的代码从 Jquery Sortable 更新到 Shopify。一切都很好，但是我在读取索引中的新位置时遇到了一些麻烦，我需要将其发布到后端。发布旧索引值似乎是连续的。

这是我的代码：

        init: function () {
        var containers = document.querySelectorAll('.draggable-zone');

        if (containers.length === 0) {
            return false;
        }
        const sortable = new Sortable.default(containers, {
            draggable: '.draggable',
            handle: '.draggable .draggable-handle',
            mirror: {
                appendTo: 'body',
                constrainDimensions: true
            },
        });
        sortable.on('sortable:start', function(){
            console.log("'swappable:start'");
        });
        sortable.on('sortable:stop', function() {
            console.log('swappable:stop');
            var portlets = $(".containersection");
            var sectionarray = portlets.map(function(i,el){return {uuid:el.getAttribute('data-uuid'), position:el.getAttribute('data-position')}}).get();
            console.log(JSON.stringify(sectionarray));
            //The position in this array reflects the new position we need to send to the backend
            $.ajax({
                url: '/updatepositions',
                dataType: 'html',
                type: 'post',
                data: { 
                    _csrf: $("input[name=_csrf]").val(),
                    positions: sectionarray
                },
                success: function(result) {
                    toastr.success("The order was saved", "updated");
                  },
                error: function(result) {
                    toastr.error("The order wasn't saved.", "Something went wrong");
                }
              });
        });
    }

我怀疑错误在这一行之内：

var sectionarray = portlets.map(function(i,el){return {uuid:el.getAttribute('data-uuid'), position:el.getAttribute('data-position')}}).get();

但我不确定如何解决它。

有什么想法吗？

Answer 1

所以显然没有一种方法可以在排序后接收数组，根据这个问题：https://github.com/Shopify/draggable/issues/273 我将改用可排序的 jquery。