I want the draggable to be reverted to its original position if the ajax call on drop returns a failure. Here is the code what I am imagining it to be.. It is OK if the draggable rests in the droppable while the ajax call is in process...
<script type="text/javascript">
jQuery(document).ready($){
$("#dragMe").draggable();
$("#dropHere").droppable({
drop: function(){
// make ajax call here. check if it returns success.
// make draggable to return to its old position on failure.
}
});
}
</script>
<div id="dragMe">DragMe</div>
<div id="dropHere">DropHere</div>
Try to save the original position before starting to drag and restore it if drops fail. You can save the original position like this:
var dragposition = '';
$('#divdrag').draggable({
// options...
start: function(event,ui){
dragposition = ui.position;
}
});
$("#dropHere").droppable({
drop: function(){
$.ajax({
url: 'myurl.php',
data: 'html',
async: true,
error: function(){
$('#divdrag').css({
'left': dragposition.left,
'top': dragposition.top
});
}
});
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With