Question

我想使用UIkit3的sortable来显示图像的缩略图，然后允许用户通过在周围拖放来重新排序它们。完成后，我希望用户按下一个按钮，然后使用排序后的图像文件名调用服务器上的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

有所启发

GetUIkit3可排序：回调

1 个答案: