GetUIkit3 可排序：回调

Question

我想使用 UIkit3 的 sortable 来显示图像的缩略图，然后允许用户按 dragging/dropping 它们重新排序。完成后，我希望用户按下一个按钮，然后调用服务器上的 PHP 函数，其中图像的文件名按排序顺序排列。该调用在客户端看起来如何？

Answer 1

你只需要使用 UIkit util 在 sortable 停止时做出反应，这意味着你完成了排序。

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 可排序：回调

GetUIkit3 Sortable: Callback

javascript

php

sortables

server

getuikit