CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
Alireza
Alireza

Reputation: 5673

Use draggable after DOM update

the current DOM is like this:

<div id="image_list">

</div>

after an event this will update to :

<div id="image_list">
   <img class="dragable-img" src="image1.png" />
   <img class="dragable-img" src="image2.png" />
   <img class="dragable-img" src="image3.png" />
   <img class="dragable-img" src="image4.png" />
 </div>

Now there is a js in the page that is supposed to handle dragging 

$('.dragable-img').draggable({
        revert: true,
            handle: 'img',
            containment: "#content-body", 
            scroll: false
 }).disableSelection();

Obviously, it is working before updating the DOM and it is not working after it. So, What am I missing here?

Upvotes: 2

Views: 359

Answers (2)

wirey00
wirey00

Reputation: 33661

Try using the ajaxComplete() function - it will trigger after every ajax call on the page

$('#image_list').ajaxComplete(function(){
    $('.dragable-img',this).draggable({
        revert: true,
        handle: 'img',
        containment: "#content-body", 
        scroll: false
    }).disableSelection();
)};

The better way would be inside your $.ajax success function to call draggable again

$.ajax({
    url:yoururl
    success: function(){
       //do what you need.. update/add to your dom 
       //then call draggable on your elements
       $('.dragable-img').draggable({
           revert: true,
           handle: 'img',
           containment: "#content-body", 
           scroll: false
       }).disableSelection();
    }
});

Upvotes: 2

Sushanth --
Sushanth --

Reputation: 55740

Check if this works..

$('#image_list').on('draggable', '.dragable-img' , function(){
   return {
            revert: true,
            handle: 'img',
            containment: "#content-body", 
            scroll: false
   }

}).disableSelection();

If this does not work .. try using .draggable() after the elements are inserted into the DOM.

Upvotes: 1

Related Questions