Nested li drag and drop using jquery ui draggable and droppable

Nested li drag and drop using jquery ui draggable and droppable

Before getting asked my question 

  My html structure 
   Design 
  

  
Javascript : :

$('#dataOne li').draggable({
helper: 'clone',
containment: 'document',
addClasses:false,
revert: 'invalid'
})
$dataTwo.droppable({
accept: "#dataOne li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
ui.draggable.draggable('option','disabled',true);
$( this ).find( ".placeholder" ).remove(); /*Remove default placeholder from right div*/
var $dragTabs=ui.draggable.clone();
if($dragTabs.context.children[1].childElementCount>0){
$dragTabs.find('li').append("<div class='customize'><button class='edit'>edit</button><button class='remove'>remove</button></div>");
$dragTabs.appendTo(this);
}else{
$dragTabs.append("<div class='customize'><button class='edit'>edit</button><button class='remove'>remove</button></div>");
var wrapvar = ui.helper.context.parentNode.parentNode.parentNode.className;
var hfour = $('.'+wrapvar).find('h4').text();
console.log(hfour);
$dragTabs.appendTo(this);
var modli = $(this).context;
modli.lastChild.className = wrapvar;
$("#list_c "+wrapvar).wrap("<div></div>");
}

}
});



My requirement : :  I want to add entire outer li even i drag inner li   . 

as shown in screen shot when i dragged organization inner li  , i want to add entire organization structure as in left side with only draggable li inside . Even i tried how harder i can , i cannot accomplish the task . Can someone help me please .