Подтвердите сортируемое событие получения jQuery - PullRequest
Новая
       1

Подтвердите сортируемое событие получения jQuery

6 голосов
/ 26 января 2011

У меня есть два отдельных списка ul: list-A и list-B

, оба из них можно сортировать благодаря плагину jQuery UI.

Пользователи проекта, над которым я работаюхочет подтвердить действие, когда элементы перемещаются из одного списка в другой, но не при перемещении в том же списке.Когда действие запускается, страница запускает Ajax-запрос на сервер, чтобы обновить позиции списка (ов).

Меня беспокоит порядок событий.Мой опыт показывает, что событие обновления запускается до события получения, поэтому перед тем, как отобразится диалоговое окно подтверждения, запрос уже был инициирован.

К сожалению, я забыл, какой из списков вызывает запрос, но в моемв случае, если это действительно не имеет значения: если элемент перетаскивается в другой список, на сервер ничего не следует отправлять, пока пользователь не подтвердит действие.

Я довольно часто использовал jQuery, но думаю, что смог бывоспользуйтесь справкой.

Javascript: 

$('.sortable').sortable({
    start: function (event, ui) {
        $(ui.helper).addClass("sortable-drag-clone");
    },
    stop: function (event, ui) {
        $(ui.helper).removeClass("sortable-drag-clone");
    },
    update: function (event, ui) {

        if ($(ui.sender).length == 0) {
            alert("item was moved within the same list.");
            //Make request
        } else {
            //do nothing.
        }
    },
    receive: function (event, ui) {
        if (confirm("show move or copy dialog, from {0} to {1}")) {
            //do request
        } else {
            $(ui.sender).sortable("cancel");
            //no request
        }
    },
    tolerance: "pointer",
    connectWith: ".sortable",
    placeholder: "sortable-draggable-placeholder",
    forcePlaceholderSize: true,
    appendTo: 'body',
    helper: 'clone',
    zIndex: 666
}).disableSelection();

Разметка: 

<div id="list-A">
    <ul class="sortable">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>
<div id="list-B">
    <ul class="sortable">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

Обновление:

Сценарий I) пользователь перетаскивает A1 на A3 - результат не является диалоговым окном подтверждения, поэтому на сервер отправляется запрос с сохранением нового порядка сортировки.

Сценарий II) пользователь перетаскивает от А1 до В3 (или от В3 до А1) - результатом является диалоговое окно подтверждения, а затем, только если диалоговое окно принято, запрос отправляется на сервер.Здесь я удовлетворился двумя запросами, как я описал в одном из моих комментариев.

1 Ответ

1 голос
/ 26 января 2011

Вам не нужен метод update, просто удалите его! Пример ссылки .

...