CODEWITHSUNDEEP
jqueryjquery-ui
Ridwanul Hafiz
Ridwanul Hafiz

Reputation: 191

jQuery live draggable / live droppable?

Here is my code. I have added some classes and removed some of its functions. CSS represents the design well but when I want to use classes which I have added to this function, jQuery doesn't get that. How can I use a live or 'on' function for these? How can I access these classes to use them in the droppable function again?

$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        $(this).removeClass('droppable');
        $(this).removeClass('ui-droppable');

        var dragIMG = '<img class="dragBox ui-draggable" data-type="'+img+'" src="img/'+img+'.jpg" alt="" style="position: relative;"/>';
        $(this).append(dragIMG);
        $('#box'+box).empty();
        $('#box'+box).addClass('droppable');
        $('#box'+box).addClass('ui-droppable');
    }
});

Upvotes: 3

Views: 2306

Answers (2)

elasticman
elasticman

Reputation: 641

Or you could use a plugin called livequery (https://github.com/brandonaaron/livequery) and call the dragable-function.

Example

$('a') 
.livequery('click', function(event) { 
    alert('clicked'); 
    return false; 
});

Upvotes: -2

Anthony Grist
Anthony Grist

Reputation: 38345

You can't, as far as I'm aware, delegate plugins in the same way that you can delegate event handlers. The selector selects elements that match at the time it's executed, then the plugin code is run to do whatever initialisation is required on those elements. Any new elements that would match the selector at a later point won't have that initialisation code called on them.

You'll need to call the plugin function again. Something like this should work:

var droppableOptions = {
    drop: function (event, ui) {
        $(this).removeClass('droppable');
        $(this).removeClass('ui-droppable');

        var dragIMG = '<img class="dragBox ui-draggable" data-type="' + img + '" src="img/' + img + '.jpg" alt="" style="position: relative;"/>';
        $(this).append(dragIMG);
        $('#box' + box).empty().addClass('droppable').addClass('ui-droppable').droppable(droppableOptions);
    }
}

$('.droppable').droppable(droppableOptions);

Upvotes: 4

Related Questions