I'm using jQuery and Ajax to load a bunch of divs into a scrollable div ("letterHolder"):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$(".letterHolder").html(result['letter_array']);
}
});
</script>
</head>
<body>
<div class="letterHolder">
</div>
</body>
</html>
The PHP script retrieves a list of filenames from the database and loads them into letterHolder, so it ends up looking like this:
<div class="letterHolder">
<div class="drag_letter">file1</div>
<div class="drag_letter">file2</div>
<div class="drag_letter">file3</div>
etc.
</div>
Now, I want to make those filename divs draggable, but this is not working:
$(".drag_letter").draggable({
cursor: 'move',
revert: true,
helper: 'clone'
});
It doesn't work if I put the draggable code into the page header, nor does it work if I put the code at the end of the page.
This was working fine before I tried creating the divs using Ajax.
I assume the reason this was working before you were using AJAX, but is not working with AJAX, is because you are calling draggable() with a selector for elements which are not yet in the DOM. If you call draggable() on the elements after receiving the AJAX result and appending the elements to the DOM it should work.
append() function for adding DOM into an element instead of html()draggable after appending elementsyou should send file names Like file1... file2... as a Json array From server
and rewrite this:
<script type="text/javascript">
$.ajax({
url: "myphpscript.php",
dataType: "json",
success: function(result) {
$.each(result,function(k,v){
$(".letterHolder").append($('<div></div>').html(v).addClass('drag_letter').draggable({
cursor: 'move',
revert: true,
helper: 'clone'
}));
});
}
});
</script>