带有拖放缩进的 Jquery 可排序答案

【问题标题】：Jquery Sortable with Drag and Drop Indent带有拖放缩进的 Jquery 可排序
【发布时间】：2019-07-27 20:23:33
【问题描述】：

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

现在我将第 1 行拖放到第 3 行 1. 它应该要求我确认（你确定吗？你想放在这里吗？”） 2. 我想如果用户同意 drop 并且该行应该添加一些边距或向右缩进

这是 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

【问题讨论】：

标签： javascript jquery drag-and-drop jquery-ui-sortable

【解决方案1】：

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

【讨论】：

不完全是我想将行拖放到它下面，我希望该行缩进。我确实了解 jquery 确认框。所以你能在第一部分提供帮助吗假设我正在拖动任何行，现在我决定将它放在它上面并且一旦放下我只是希望它应该向右缩进或者我目前与表 tr 和 td 一起使用的一些边距如果它可以通过任何其他方式实现，请告诉我

【解决方案2】：

您可以使用以下接收功能：

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

它将显示确认框，然后确定，将允许用户删除元素。对于边距/缩进，您需要通过父容器在每个放置的元素上应用 css。希望对你有帮助。

【讨论】：