У меня есть divgable div, который я хочу, чтобы перетащить в droppable div.
Как только вы уроните его, его больше нельзя перетаскивать, и он должен располагаться в центре отбрасываемого div.
Я получил эту работу, но теперь я хочу добавить запрос AJAX, когда div отбрасывается. Если вызов AJAX успешный, перетаскиваемый div больше не должен перетаскиваться и располагаться в центре отбрасываемого div.
С моим текущим кодом, когда я добавляю вызов AJAX, все работает нормально, а затем droppable div возвращается обратно туда, где он был запущен. Кто-нибудь знает, как я могу остановить это?
У меня есть демо проблемы здесь
Код выглядит следующим образом:
HTML
<div id="playingArea" class="droppable">Drop in here</div>
<div id="player" class="draggable">Drag Me</div>
CSS
#playingArea{
border:1px solid black;
min-height: 150px;
min-width: 150px;
margin-bottom: 30px;
}
#player{
border:1px solid red;
height: 50px;
width: 50px;
}
Javascript
$(function() {
$('.draggable').draggable({
containment : 'document',
cursor : 'move',
revert : true
});
$('.droppable').droppable({
accept : '.draggable',
hoverClass : 'hovered',
drop : handleDrop
});
})
function handleDrop(event, ui) {
$.ajax({
url : "/echo/json/",
dataType : 'json',
error : function(data, errorThrown) {
alert('request failed :' + errorThrown);
},
success : function(data) {
positionBox(event, ui);
}
});
}
function positionBox(event, ui) {
ui.draggable.draggable('disable');
ui.draggable.position({
of : $("#playingArea"),
my : 'center',
at : 'center'
});
ui.draggable.draggable('option', 'revert', false);
$("#player").css({
opacity : 1
})
alert("looks ok now - but it won't stay here");
}
В конце концов я его отсортировал, просто нужно было вернуть значение "недействительно", а не true:
$('.draggable').draggable({
containment : 'document',
cursor : 'move',
revert : "invalid"
});
а затем удалите опцию возврата в функции positionBox. Я обновил скрипт, чтобы отразить решение для дальнейшего использования.
Вы должны установить атрибут revert
на false
$('.draggable').draggable({
containment : 'document',
cursor : 'move',
revert : false
});