javascript - Issue with jQuery UI Droppable. Greedy option not being honored when re-binding events -

i seem having issue jquery ui draggable , droppable.

i'm trying create header groups, if header dragged contents dragged it.

as can see in https://jsfiddle.net/ah19odmf/2/, able drag items either inner-droppable or outer-droppable, , have whole inner-droppable draggable dragging header div.

this seems work fine on first run, able drag items , drop them in either outer or inner droppable without issue.

however once inner droppable has been moved dragging header div, when re-bind droppable inner droppable, greedy option being ignored.

once have moved header, when try drop item on inner droppable, appends div, , parent div @ same time.

i working around in code removing duplicated item, less ideal.

has seen issue before? bug jquery ui, or messing in code somewhere?

any vastly appreciated, in advance replies.

html code:

<div class='outer-droppable'>  <div class='inner-droppable'>     <div class='header'>       header     </div>     <div class='item'>       item     </div>   </div>   <div class='item'>     item   </div> </div>  <div class='outer-droppable'>   <div class='inner-droppable'>     <div class='header'>       header     </div>     <div class='item'>       item     </div>   </div>   <div class='item'>     item   </div> </div> 

jquery:

$(function() {         $( ".header" ).draggable({           appendto: 'body',           containment: 'window',           scroll: false,           helper: headerhelper         });         $( ".item" ).draggable({           appendto: 'body',           containment: 'window',           scroll: false,           helper: itemhelper         });         $( ".outer-droppable" ).droppable({            drop: function(event, ui) {             if(ui.helper.find('.header').length > 0) {                 ui.draggable.parent().remove();                 onheaderdrop(ui.helper, $(this));             }             else             {                 ui.draggable.remove();                 onitemdrop(ui.helper, $(this));             }           },           greedy: true,           accept: ".item, .header"         });          $( ".inner-droppable" ).droppable({greedy: true,           accept: ".item",           drop: function(event, ui) {             ui.draggable.remove();             onitemdrop(ui.helper, $(this));           }         }); });  function headerhelper(event) {     return $(event.target).closest('.inner-droppable').clone().css("width", $(event.target).closest('.inner-droppable').width()); }  function itemhelper(event) {     return $(event.target).clone().css("width", $(event.target).width()); }  function onheaderdrop(item, target) {     $(item)   .clone()   .removeattr('style')   .appendto(target);   var dropped = $(target).children().last();    $(dropped).droppable({             greedy: true,             accept: ".item",             drop: function(event, ui) {                 onitemdrop(ui.helper, $(this));             }         });     $(dropped).children('.header')     .draggable({             appendto: 'body',             containment: 'window',             scroll: false,             helper: headerhelper         });      $(dropped).children('.item')     .draggable({             appendto: 'body',             containment: 'window',             scroll: false,             helper: itemhelper         }); }  function onitemdrop(item, target) {     $(item)   .clone()   .removeattr('style')   .appendto(target);    var dropped = $(target).children().last();   $(dropped) .draggable({             appendto: 'body',             containment: 'window',             scroll: false,             helper: itemhelper         }); } 

(really bad) css:

.outer-droppable {   height: 500px;   width: 300px;   background-color: red;   margin-bottom: 20px;   float: left;   margin-right: 10px; }  .inner-droppable {   height: 100px;   width: 90%;   margin-left: auto;   margin-right: auto;   background-color: blue; }  .header {   background-color: orange; }  .item {   background-color: green; }