CODEWITHSUNDEEP
jqueryjquery-uiasp.net-ajaxjquery-ui-draggable
Kushal Kalambi
Kushal Kalambi

Reputation: 125

Jquery draggable stops after IE AJAX refresh

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.

Upvotes: 0

Views: 1134

Answers (2)

Kushal Kalambi
Kushal Kalambi

Reputation: 125

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.

Upvotes: 1

mehul9595
mehul9595

Reputation: 1955

This is because jquery is losing its event after partial post backs. try using this way,

function pageLoad() { $(".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'); } }); }); }

Upvotes: 0

Related Questions