Пользовательский интерфейс JQuery: отмена сортировки при сбрасывании - PullRequest
Новая
       16

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

12 голосов
/ 20 октября 2011

Я использую JQuery 1.5.1 и JQuery UI 1.8.11.

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

Но я также хочу включить Droppable, чтобы элемент можно было перетащить в область «Скопировать меня» - задача будет дублировать элемент (об этом я расскажу позже)

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

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

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

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

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

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

Спасибо

1 Ответ

4 голосов
/ 20 октября 2011

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

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

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

Вот пример

Это все еще не правильно(UX-мудрый), но он работает правильно, и вы всегда можете установить revert в 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();
}

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

...