Question

我有一个表，并且正在使用Jquery-UI Sortable 我想要实现的是当我执行拖放到表格行时，当我拖放到表行时，应该缩进或添加一些空白例如如果我有一张桌子 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'));
            }                
        },

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

jQuery可排序与拖放缩进

2 个答案: