jQuery Draggable, событие, когда выпадает за пределы родительского div - PullRequest
Новая
       2

jQuery Draggable, событие, когда выпадает за пределы родительского div

6 голосов
/ 16 февраля 2012

У меня есть список фотографий, и я добавил к ним перетаскиваемый объект, однако, когда фотография перетаскивается за пределы родительского раздела, я хочу изменить его класс, чтобы он указывал, что если вы уроните его, он будет удален,и затем, когда пользователь удаляет его, я хочу, чтобы он запустил функцию.(только если он находится за пределами родительского div) 

<ul class="photos">
<li><img src=""/></li>
<li><img src=""/></li>
</ul>

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

1 Ответ

10 голосов
/ 16 февраля 2012

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

$("#parentDiv").on("dropout", function(event, ui) {
    //ui.draggable refers to the draggable
});

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

Обновление (см. Комментарии)

Вы можете предоставить функцию обратного вызова для опции revert. Функция может принимать один аргумент, который либо содержит элемент сброса, для которого перетаскиваемый объект был отброшен, либо false (если он был сброшен где-то недопустимым): 

$("#draggable").draggable({
    revert: function(valid) {
        if(!valid) {
            //Dropped outside of valid droppable
        }
    }
});

Вот рабочий пример .

...