Jquery сортируемый с отступом перетаскивания - PullRequest
Новая
       33

Jquery сортируемый с отступом перетаскивания

0 голосов
/ 06 марта 2019

У меня есть таблица, и я использую Jquery-UI. Сортируемое, что я пытаюсь добиться, это когда я выполняю перетаскивание в строку таблицы и когда я опускаю ее, она должна иметь отступ или добавляться с некоторым запасом к соответствующей строкенапример, если у меня есть таблица как изображение таблицы

, теперь я перетаскиваю, скажем, строку № 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

Ответы [ 2 ]

0 голосов
/ 06 марта 2019

Вы можете использовать функцию получения для этого, как показано ниже: 

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

Появится окно подтверждения, а затем ОК, позволит пользователю удалить элемент. А для маркировки / отступа вам нужно применить css к каждому отброшенному элементу через родительский контейнер. Надеюсь, это поможет вам.

0 голосов
/ 06 марта 2019

Я думаю, что сортируемая функция не имеет функции отмены последней капли, поэтому вам нужно сохранить порядок перед перетаскиванием и восстановить его, если пользователь отменит его. Что касается функциональности подтверждения, вы должны проверить jquery подтверждение

...