Удалите сбрасываемую функциональность при успехе, используя jQuery UI

5

У меня есть следующий код, который позволяет перетаскивать элементы на странице и при успешном отбрасывании запускает метод, называемый saveRatings, передающий идентификаторы элементов.

            $('.draggable').draggable({
                revert: true
            });


            $('.droppable').droppable({
                drop: function( event, ui ) {
                    draggedID = ui.draggable.attr("id");
                    droppedID = $(this).attr("id");
                    Global.showLoader('Saving...');
                    quiz1.saveRatings(draggedID, droppedID);
                }
            });

План состоит в том, что после успешного удаления он удалит перетаскиваемый элемент и удалит класс droppable из сброшенного элемента, чтобы предотвратить также отбрасывание других элементов:

saveRatings: function ( choiceId, ratingId ) {

                // Hide the dragged choice
                $('div#' + choiceId).hide();

                // Remove droppable behaviour
                $('div#' + ratingId).removeClass('ui-droppable');
                $('div#' + ratingId).removeClass('droppable');
                $('div#' + ratingId).addClass('done');

}

Часть удаления работает отлично, так же как и удаление классов, но элемент все еще позволяет удалять другие на нем... хотя я удалил классы droppable и ui-droppable из элемента...

Любые идеи, почему это не работает? Я не могу показать скрипту, поскольку база полного кода довольно велика (но прямо не влияет на это). Но приведенные выше примеры должны объяснить проблему достаточно для решения, надеюсь.

Теги:

3 ответа

17
Лучший ответ

Используйте disable:

$('#' + ratingId).droppable('disable')

Кроме того, вам не нужно указывать 'div#' при выборе по идентификатору, поскольку идентификатор уникален.

Демо (используя уничтожение)

Поделиться
  • 0
    Почему удаление класса не работает?
  • 4
    Или $ ('div #' + ratingId) .droppable ("destroy"), если он хочет полностью избавиться от предмета сброса.
Показать ещё 3 комментария
9

Вы можете использовать:

$('#' + ratingId).droppable('destroy')

Это позволит навсегда удалить поведение элемента управления из-за этого. Если вы хотите повторно инициализировать его, вам просто нужно снова сделать элемент droppable с использованием того же кода инициализации, что и при его первоначальной инициализации.

Для получения дополнительной информации см. документацию: http://api.jqueryui.com/droppable/#method-destroy

Поделиться
  • 0
    Спас мою жизнь...
1

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

//Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
//setter
$( ".selector" ).droppable( "option", "disabled", true );
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню