GetUIkit3可排序:回调

Question

我想使用UIkit3的排序显示图片的缩略图，然后允许用户通过拖放它们来重新排序。一旦完成，我希望用户按下一个按钮，然后按排序顺序调用服务器上的PHP函数和图像的文件名。在客户端这个电话看起来怎么样？

Answer 1

您只需在可排序停止时使用UIkit util作出反应，这意味着您完成了排序。

var util = UIkit.util;

util.ready(function () {
    util.on(document.body, 'stop', function (e, sortable, el) {
        console.log(e.type, sortable, el); //this if for the reference
        //get the elements order in your grid
        var sortResult = { elementsOrder: [] };
        $('#myGridWithElements > div').each(function () {
            var currentEl = $(this)
            var currentElSrc = $('img', currentEl).attr('src'); //src of image inside the div context
            sortResult.elementsOrder.push(currentElSrc);  
        });

        $.post( "/admin/save_order",{data: sortResult}).done(function( data ) {
            alert('Yes, you\'ve saved the data');
        }).fail(function(data) { alert('Something gone wrong');});
    });
});

我受到了可排序测试页面https://getuikit.com/assets/uikit/tests/sortable.html的启发