views:

5

answers:

0

I'm working on an app that requires drag-drop. Upon drop, the selected draggable needs to remain present but become disabled. Then the new 'dropped' item is appended with a 'close' button. Upon clicking the close button, the item disappears from the 'droppable' area and re-activates as a draggable.

The issue is that once I disable the draggable (after successful drop), i cannot re-enable that one unique item in my separate 'remove' function. here's some sample code - alot of it is stripped out for purposes of simplicity in hopes of getting advice on this particular issues i'm having.

// DROP: initiate droppables  

    $(".droppable").droppable({
            hoverClass: 'drag-state-hover',
            accept: '.draggable li img',
            tolerance: 'fit',
            drop: function(event, ui) {

                var elementID = $(ui.draggable).attr("id") // get the dynamically set li id for each list item chosen

                if(    $(this).children('img').attr('src') == 'images/elements/blank.gif'  ) {

                    // disable the element once it's been dragged and dropped
                    $(ui.draggable).draggable( 'option', 'disabled', true );
                    // turn on the remove link
                    $(this).find('a.remove').toggle();                                       

                }                                                                          

            }                                                                               
        });       



    // ITEM REMOVE: function for removing items
    $('.remove').click(function(e) {

            var targetID = $(this).parent('li').attr('id');
            $('#' + targetID).children('img').draggable( 'option', 'disabled', false );

            e.preventDefault();

        });

I've also tried this with no success...

// ITEM REMOVE: function for removing items
$('.remove').click(function(e) {

        var targetID = $(this).parent('li').attr('id');

        $(".droppable").droppable({
            hoverClass: 'drag-state-hover',
            accept: '.draggable li img',
            tolerance: 'fit',
            drop: function(event, ui) {                           
                $(ui.draggable).draggable( 'option', 'disabled', false );                                                   
            }                                                                               
        });                                                               

        e.preventDefault();

    });

I've spent days searching on google for a solution, but I'm banging my head at this point. any assistance would be much appreciated. Thanks!!