Question

If I specify the accept option for a droppable that is also draggable this breaks the draggable behavior of that droppable.

To prevent nesting of these draggable droppables, I specify the accept option to be only the class that belongs in the droppable. I do this with $('div.link_drop_box', $('#'+card_id)).droppable({ accept: '.link' });. Here is the javascript where I specify the droppable draggable div.

    // Define more LinkCard options
    $('#'+card_id).css('width',350);
    $('#'+card_id).css('height',250);
    $('#'+card_id).resizable();
    $('#'+card_id).draggable();
    $('#'+card_id).draggable("option", "handle", '.linkcard_header');
    $('#'+card_id+' p').editableText();
    $('#'+card_id).draggable({ stop: function(event, ui) { update_linkcard_xml(card_id) } });

    // Make droppable
    $('div.link_drop_box', $('#'+card_id)).droppable({ accept: '.link' });
    $('div.link_drop_box', $('#'+card_id)).droppable({
        drop: function( event, ui ) {
            var $item = ui.draggable;
            $item.fadeOut(function() {

            $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
        }); 
        $item.appendTo( this );
        }
    });

Now the droppable divs aren’t draggable anymore. The strange behavior is that there are several such droppable divs. The first one is still draggable, the the others are not. What could cause the accept option to break the draggable behavior.

Answer 1

Found the problem. Should put all the options in one droppable Method. The following works.

    $('div.link_drop_box', $('#'+card_id)).droppable({
       drop: function( event, ui ) {
          var $item = ui.draggable;
          $item.fadeOut(function() {
             $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
          }); 
          $item.appendTo( this );
          /* update_links_xml("card_id"); */
       },
       out: function( event, ui ) {
          /* update_links_xml("card_id"); */ 
       },
       accept: ".link",
     });