Jquery JavaScript DHTML





  jQuery UI Droppable - Prevent propagation
  
  
  
  
  
  
  
  #draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
  #droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
  
  
  $(function() {
    $("#draggable").draggable();
    $("#droppable, #droppable-inner").droppable({
      activeClass: 'ui-state-hover',
      hoverClass: 'ui-state-active',
      drop: function(event, ui) {
        $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
        return false;
      }
    });
    $("#droppable2, #droppable2-inner").droppable({
      greedy: true,
      activeClass: 'ui-state-hover',
      hoverClass: 'ui-state-active',
      drop: function(event, ui) {
        $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');
      }
    });
  });
  



  

  

Drag me to my target




  

Outer droppable


  
    

Inner droppable (not greedy)


  



  

Outer droppable


  
    

Inner droppable (greedy)


  



When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the greedy option set to true prevents event propagation when a draggable is dropped on a child node (droppable).