JQuery UI - Разрешить Droppable иметь блокируемый div

4

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

http://jsfiddle.net/zs6US/

$('.draggable').draggable({
    revert: 'invalid'
});
$('#droppable').droppable({
    accept: '.draggable'
});

Зеленый флажок действителен. Красная коробка - нет. Если перетаскиваемый снижается на красный, даже красный, который находится поверх зеленого, я хочу, чтобы он был недействительным и возвращался. В этом примере это не работает.

Достижимо ли это? Я прикрепил API и другие вопросы и не смог найти ответ.

Теги:
jquery-ui-droppable
jquery-ui-draggable

3 ответа

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

Просто добавьте оба элемента в раскрывающиеся типы, а затем отметьте элемент, на который он был сброшен. Если это block, то верните.

http://jsfiddle.net/zs6US/12/

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

$('#droppable, #block').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        if (this.id == 'block') {
            ui.draggable.draggable({ revert: true  });
        } else {
            ui.draggable.draggable({ revert: "invalid"});
        }
    }
});
Поделиться
  • 0
    Ах, да, это то, что мне было нужно. Спасибо вам за помощь.
  • 2
    Хотя это принятый ответ @user2437462 user2437462, есть проблема с этим решением. как только вы уроните его на зеленый ящик, он также может быть сброшен на белый участок ... Поскольку ypu делает возврат revert: false Посмотрите, мой naswer, он решил эту проблему
Показать ещё 5 комментариев
1

Принятое решение чище, но имеет 1 проблему. Как только Draggable выпадет над зеленой зоной, он будет beocome Droppable даже на белом фоне... (Примечание revert: false) Обновляет этот ответ с помощью правильного кода.

DEMO2

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

$('#droppable, #block').droppable({
    accept: '.draggable',
    drop: function( event, ui ) {
        if(!ui.draggable.data('original')){
            ui.draggable.data('original',ui.draggable.draggable("option", "revert"));
        }
        if (this.id == 'block') {
            ui.draggable.draggable({ revert: true  });
        } else {
            ui.draggable.draggable({ revert: ui.draggable.data('original')  });
        }
    }
});

Похоже, у этого вопроса уже есть ответ. но вот моя попытка решить ту же проблему.

DEMO

$('#block').droppable({
    accept: '.draggable',
    drop: function (event, ui) {
        if (ui.draggable.data('revert')) {
            ui.draggable.data('revert', false);
            var old = ui.draggable.draggable("option", "revert");
            ui.draggable.draggable("option", "revert", true);
            setTimeout(function () {
               ui.draggable.draggable("option", "revert", old);
            }, 100);
        }
    },
    out: function (event) {
        $('.draggable').data('revert', false);
    },
    over: function (event,ui) {
       ui.draggable.data('revert', true);
    }
});

$('#droppable').droppable({
    accept: function (elem) {
      if ($('.draggable').data('revert')) {
            return false;
        }
        return elem.hasClass("draggable");
    }
});

$('.draggable').draggable({
    revert: 'invalid'
});
Поделиться
1

Может быть обходным путем:

http://jsfiddle.net/zs6US/4/show

http://jsfiddle.net/zs6US/4/

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

$('#droppable').droppable({
    accept: '.draggable',
    drop: function (e, ui) {
        ui.draggable.hide();
        console.log(ui);
        var target = document.elementFromPoint(ui.offset.left, ui.offset.top);
        if (!target || target.id != "droppable") ui.draggable.draggable({
            revert: true
        });
        else  ui.draggable.draggable({
            revert: false
        });
        ui.draggable.show();
        }
    });
Поделиться
  • 0
    Надеюсь, что после теста это глючит, но может привести вас в нужное русло
  • 0
    Спасибо, это было на правильном пути. ответ jammykam немного чище и проще, хотя.

Ещё вопросы

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