Подтвердить что ты не робот

Пользовательский интерфейс JQuery: Отмена сортировки по Droppable Drop

Я использую JQuery 1.5.1 и пользовательский интерфейс JQuery 1.8.11.

Я добавил сортировку для нескольких элементов - задача здесь - разрешить перетаскивание, все это прекрасно работает.

Но я также хочу включить droppable, так что элемент можно отбросить на область "копировать меня" - задача будет дублировать элемент (я буду работать, что бит позже)

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

Что я хочу сделать, это отменить этот вид, когда происходит событие drop.

Здесь вы можете увидеть мою проблему в действии (просто перетащите "Item 1" в область "Drop to Copy Item", и вы увидите, что сортировка не получается аннулированными)

Как вы можете видеть, я пробовал следующее в droppable-событии "drop" (предлагаемом из JQuery UI Docs), но он, похоже, не работает...

$(this).sortable('cancel');

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

Спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

ОК, поэтому я разработал решение, которое выполняет эту работу.

код отмены работает, если у вас есть это в событии "stop" сортируемой функции. Однако он будет применяться только после завершения "возврата". Проблема в том, что я пытался скопировать/вернуть элемент из droppable-события "drop", и это было слишком рано.

Решение состоит в том, чтобы дождаться завершения события "stop" , и для этого мне пришлось создать флаг "ожидающей копии", который будет проверяться в событии "stop" .

Вот пример

Он по-прежнему не чувствует себя хорошо (UX-мудрый), но он работает правильно, и вы всегда можете установить возврат к false в сортируемую функцию, чтобы немного улучшить восприятие.

Код из примера выглядит следующим образом:

var itemCount = 3;
var awaitingCopy = false;

$(init);

function init() {
    $("#Items").sortable({
        revert: true,
        placeholder: "ItemPlaceHolder",
        opacity: 0.6,
        start: StartDrag,
        stop: StopDrag
    });

    $("#CopyItem").droppable({
        hoverClass: "CopyItemActive",
        drop: function(event, ui) {
            awaitingCopy = true;
        }
    });

    $("#NewItem").click(function(e) {
        e.preventDefault();
        itemCount++;
        var element = $("<div class='Item'>Item " + itemCount + "</div>");
        $("#Items").append(element);
        element.hide().slideDown(500);
    });
}

function CopyItem(element) {
    awaitingCopy = false;
    var clone = element.clone();
    $("#Items").append(clone);
    clone.hide().slideDown(500);
}

function StartDrag() {
    $("#NewItem").hide();
    $("#CopyItem").show();
}

function StopDrag(event, ui) {
    if (awaitingCopy) {
        $(this).sortable('cancel');
        CopyItem($(ui.item));
    }
    $("#NewItem").show();
    $("#CopyItem").hide();
}

В любом случае, надеюсь, это поможет другим, кто хочет такого же эффекта... не украсть мой дизайн, хотя;)