JQuery drag and drop stops working on certain objects?

Question

Hello all, I've successfully been able to make elements (like div's, panel's, whatever) draggable by using this bit of Jquery:

<script type="text/javascript">
      $(function() {
          $(".drag").draggable({ revert: true });
      });
</script>

This works fine for anything that already exists on the page before page_load is done and before any postbacks occur. I have a series of buttons (with a class of '.catbuttons') that when clicked, will call out to my database and retrieve some image url's. Once I retrieve this set of url's, I do a for/next loop and create a whole bunch of image objects and place them into a panel. Each of the images has the cssclass of '.drag' to make it work with the JQuery above.

Problem is, they no longer drag! I've read another post on here about needing to rebind javascript stuff after a postback (even a partial postback?) and this would allow brand new controls to get the above Jquery code attached to them, and hence make them draggable. After some google searching, I ran into this and tested it out:

<script type="text/javascript">
        $(".catbuttons").live("click", function(){
            $(".drag").draggable({ revert: true });
        });
 </script>

I tried leaving this in the header section of my aspx page with the original script, and also having this here all by itself. No dice either way.

Thoughts?

Answer 1

The above function actually expect a click from user, to call draggable again. Instead you need to do it after postback. Rule here, should be, to register all images with draggable function, after placing the images on page.

Edit: In your case clicking button just triggers the function to fetch the images. Those images should be placed on page, before you make them draggables. You can register the created object with draggables, immediately after the statements where you place & apply ".drag" cssclass to those object/images at runtime.