Question

I have a web page where I create images from text by clicking a button and add the image to a draggable div in a parent div element. The div is in an update panel. The divs are draggable after this event. I have another button which saves the html temporarily and recreates the divs with their positions when i add another image->text. However after this event all the old divs lose thier drag property, the last div which has been added still retains the draggable property.

 $(".inner").live('mousedown', function() {
    $(this).draggable({
              containment: "#<%=divMain.ClientID%>",
        cursor: "move",
        stop: function(event, ui) {
             var position = $(this).position();
            $(this).css("top", position.top + 'px');
            $(this).css("left",position.left + 'px');
        }
    });
});

This is my current function. Please suggest ! This works perfectly in Firefox and chrome. Issue is only in IE.

Answer 1

Thankyou for your suggestions, i found the solution, when I add the div dynamically through the ajax[postback], i destroy draggble for all divs which have been added.$(‘.draggable’).draggable(‘destroy’);
Then reassign the draggable function using the live function $(“.draggable'”).live(‘mousedown click’, function() {…});
Works perfectly.