Блог

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

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

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

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

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

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

Как вы можете видеть, я попробовал следующее в отбрасываемом событии «drop» (предлагается из документов jQuery UI), но, похоже, это не работает…

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

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

Спасибо

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

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

Решение состоит в том, чтобы дождаться завершения события «stop», и для достижения этой цели мне пришлось создать флаг «ожидание копирования», который будет проверяться в событии «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();
}
  

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