JQuery drag and drop stops working on certain objects?
I will be able to successfully make elements (e.g. div's, panel's, whatever) drag and drop using this bit of JQuery:
<script type="text/javascript">
$(function() {
$(".drag").draggable({ revert: true });
});
</script>
This works great for anything that already exists on the page, before the page_load function is fired and before any callbacks occur. I have a series of buttons (with class ".catbuttons") that, when clicked, will call on my database and retrieve the url of the image. Once I get this set of urls, I do a for / next loop and create a whole bunch of image objects and put them in the panel. Each of the images has a cssclass '.drag' to make it work with the JQuery above.
The problem is they don't pull anymore! I read another article about the need to retrain the javascript after postbacks (even partial postbacks?) And that would allow new controls to get the above JQuery code attached to them, and hence make them draggable. After some googling I came across this and tested it:
<script type="text/javascript">
$(".catbuttons").live("click", function(){
$(".drag").draggable({ revert: true });
});
</script>
I tried to leave this in the header section of my aspx page with the original script, and also have it all seperate here. No dice anyway.
Thoughts?
a source to share
The above function actually expects a click from the user to trigger the drag again. Instead, you need to do it after the postback. The rule of thumb should be to register all drag-and-drop images after placing the images on the page.
Edit: In your case, pressing the button just triggers a function to retrieve the images. These images must be placed on the page before you drag and drop them. You can register the created object with draggables, right after the statements where you place and apply cssclass.drag to those objects / images at runtime.
a source to share