How do I make jQuery work after an AJAX call - ajax

Question

I've read a few posts on this, but none gave a specific answer (or the questions were unnecessarily complicated...). I will keep it simple.
I am using jQuery UI for a draggable/droppable function. When a draggable is dropped on the target element, an AJAX function is called. It all works fine, but only once. When I try it again, I can't even drag the element anymore. Here is my (simplified) code:
$(document).ready(function() {
$(".item").draggable();
$(".target").droppable({
drop: function(){
AjaxFunction(var1, var2);
}
});
});
This is the simplified AjaxFunction:
function AjaxFunction (var1, var2) {
var url = "ajax/script.php";
var data = {position: var1, tag: var2};
$.post(url, data, function(data) {
$(".target").html(data).show();
});
}
Can anyone give me a specific solution to the above code on how to make it work?

Answer 1

You may want to refer to this post:
Jquery Draggable - How do I create a new draggable div on the fly that can then be dragged?
Specifically this part:
$(element).draggable('disable');
and
$(element).draggable('enable');
It is not exactly the same but it gives some insight on the problem. Basically, you may want to try disabling draggable and droppable, then re-enabling them after your ajax success.
function AjaxFunction (var1, var2) {
var url = "ajax/script.php";
var data = {position: var1, tag: var2};
$.post(url, data, function(data) {
$(".item").draggable("destroy");
$(".target").droppable("destroy");
$(".target").html(data).show().droppable({revert:true});
$(".item").draggable();
});
}