как вернуться положение UI jQuery, перемещаемого на основе условия
У меня есть элемент, который перемещаем и элемент, который является сбрасываемым. После того как перетащенный объект отбрасывается на дропзоне, я пытаюсь выполнить следующий jQuery psuedo код:
if(draggedelement == value){
$(draggedelement).hide();
}
else{
$(draggedelement).revert();
}
где revert() функция кладет обратно перетащенный объект к своему исходному постиону.
Как можно было бы выполнить это?
P.S. Я знаю о перемещаемом, 'возвращаются' опция, однако это только активируется, если перетащенный объект не добирается до дропзоны.
2 ответа
Для этого есть несколько встроенных опций, на вашем .draggable () установите revert опцию на 'invalid' , и он вернется, если он не был успешно сброшен на сбрасываемый объект, например:
$("#draggable").draggable({ revert: 'invalid' });
Затем в вашем .droppable () установите, что действительно для отбрасывания, используя accept параметр , например:
$("#droppable").droppable({ accept: '#draggable' });
Все, что не соответствует этому селектору, сбрасывается, когда вы отпускаете, вы можете увидеть полную демонстрацию здесь . Опция accept также принимает функцию, если вам нужна фильтрация, которую не может предоставить селектор, например:
$("#droppable").droppable({
accept: function(dropElem) {
//dropElem was the dropped element, return true or false to accept/refuse it
}
});
Попробуйте добавить этот код в событие drop. Вот демонстрация .
HTML
<div class="draggable ui-widget-content correct"><p>1</p></div>
<div class="draggable ui-widget-content"><p>2</p></div>
<div class="draggable ui-widget-content"><p>3</p></div>
<div class="draggable ui-widget-content"><p>4</p></div>
<br style="clear: both">
<div id="droppable" class="ui-widget-header">
<p>Drop me here</p>
</div>
Скрипт
$(function() {
$(".draggable").draggable({ revert: true });
$("#droppable").droppable({
activeClass: 'ui-state-hover',
hoverClass: 'ui-state-active',
// uncomment the line below to only accept the .correct class..
// Note: the "drop" function will not be called if not ".correct"
// accept : '.correct',
drop: function(event, ui) {
// alternative method:
// if (ui.draggable.find('p').text() == "1") {
if (ui.draggable.is('.correct')) {
$(this).addClass('ui-state-highlight').find('p').html('You got it!');
// cloning and appending prevents the revert animation from still occurring
ui.draggable.clone(true).css('position', 'inherit').appendTo($(this));
ui.draggable.remove();
} else {
$('#droppable > p').html('Not that one!')
setTimeout(function(){ $('#droppable > p').html('Drop here'); }, 1000);
}
}
});
});
Как вы можете видеть в скрипте, вы можете искать либо класс .correct , либо текст внутри (закомментированная строка)