Jquery可以拖放缩进排序

Question

我有一个表，我正在使用Jquery-UI Sortable我想要实现的是当我执行拖放到表行时，当我丢弃它应该缩进或添加一些边距到相应的行，例如If我有一张桌子作为table image

现在我拖放说行＃1排到行＃3 1.它应该问我确认（你确定吗？你想放到这里？）2。我想如果用户同意掉落那行应添加一些边距或向右缩进

这是JS代码

$(function() {
    
    var fixHelper = function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    };
    $("#tbody").sortable({
        helper: fixHelper,
        placeholder: "placeholder",
        start: function (event, ui) {
            ui.placeholder.addClass('placeholder-sub');
        },
        sort: function (event, ui) {
            var pos;
            pos = ui.position.left + 20;

        }

    });


});

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>twitter</td>
        </tr>
    </tbody>
</table>

我目前正在使用Jquery / Jquery UI和Bootstrap css jquery v1.12.4 Jquery ui- jQuery UI - v1.12.1

Answer 1

我认为sortable没有任何undo-last-drop功能，所以你需要在拖动之前保存订单并在用户取消时恢复它。至于确认功能，你应该检查jquery confirm

Answer 2

您可以使用接收功能，如下所示：

        receive: function( event, ui ) {                  
            if (!confirm('Are you sure?')) {
                 ui.sender.sortable("cancel");
            } else {
                 ui.item.after(ui.item.data('items'));
            }                
        },

它将显示确认框然后在确定，将允许用户删除元素。对于marging / indenting，您需要通过父容器对每个被删除的元素应用css。希望它能帮到你。