Jquery, как указать, какой сбрасываемый объект должен использоваться с вложенными сбрасываемыми элементами.

У меня есть небольшая проблема, которую я не могу решить сам. Посмотрите на эту скрипку: JSfiddle

Это основной пример проблемы, которую я имею. У меня есть большой div, который является областью сбрасывания. Внутри этой области сброса есть множество других областей сброса.

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

Я надеюсь, что мой вопрос достаточно ясен, но я думаю, что скрипач говорит сам за себя.

PS - изменение размера в этом примере не работает, но работает в моей среде разработки.

Расти и Марк, спасибо за ваши ответы.

Я извиняюсь за запутывающий изменение размера. Я только что удалил это из кода. Новый Скрипач

Просто чтобы уточнить вещи. Поле div - это контейнер, в котором есть несколько изображений. Я пытаюсь добиться следующего: http://postimage.org/image/qwhtik04f/ Серая пунктирная рамка - это элемент dropbox2 из моего примера. Пространство вокруг этих выпадающих ящиков - это dropbox div.

Пространство с доской - единственное место, где изображения могут быть сброшены без каких-либо событий. Перетаскиваемые изображения могут быть привязаны к элементам dropbox2. Если изображения перетаскиваются на div-файл dropbox, они должны вернуться.

Источник

2 ответа

Решение

Ваш код имеет это для внешнего <div>:

$("#dropbox").droppable({
    drop: function(event, ui) {
       ui.draggable.draggable( 'option', 'revert', true );
    }
});

Это говорит о том, чтобы установить revert возможность true когда вы тянете во внешний <div>, Тем не менее, когда вы загляните в меньший <div>, опция все еще установлена ​​в true, Все, что вам нужно сделать, это изменить revert значение вашего перетаскиваемого элемента после успешного падения вашего внутреннего <div>:

$("#dropbox2").droppable({
    drop: function(event, ui) {
        ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
        // Add this line
        ui.draggable.draggable( 'option', 'revert', false );
    }
});

Обновить:

Марк отметил, что мое решение не останавливает распространение события в родительский контейнер. Как показывает его ответ, вам нужно добавить greedy: true в ваших первоначальных вариантах. Документация jQuery гласит:

Если это правда, будет предотвращать распространение событий на вложенных dropppables.

Это звучит как то, что вы ищете. Вам все еще нужно изменить revert собственность на твой перетаскиваемый, так как greedy устанавливается только на ваши сбрасываемые предметы и не влияет на ваши перетаскиваемые реакции.

Источник

Настройка greedy: true опция на внутреннем сбрасывании предотвратит событие, происходящее на внешнем сбрасывании:

jQuery('#dropbox2').droppable({
    greedy: true,
    drop: function(event, ui) {
        // ...
    }
});
Источник
Другие вопросы по тегам