Jquery Drag + Drop-Problem

Question

Ich habe den folgenden JSfiddle-Code (Link unten) . Ich habe Probleme, es zu reparieren, damit die Einzelteile innerhalb des weißen Kastenbereichs geschleppt werden können.

Szenario: Das Feld Benutzer 1 ist die Basis und alle anderen Benutzerboxen sollten innerhalb des Benutzerinhalts DIV mit weißem Inhalt sein. Dann, wenn Sie zum Beispiel Benutzer 4 in Benutzer 2 ziehen, sollte der Benutzer 4 innerhalb der weißen Inhaltsbox von Benutzer 2 sein und so weiter. Im Moment wird es einfach in den grauen Teil der Benutzer 2 Box ziehen.

Irgendwelche Ideen zum Einrichten der DIVs?

Ich weiß, sie mit dem HTML-Setup zu tun, kann einfach nicht daran denken, wie es zu beheben

https://jsfiddle.net/euf1s9gc/3/

'use strict' 

$(document).ready(function(){ 

var resp =[{"id":"1","name":"User","title":"1","parentID":"9","base":"1"}, 
{"id":"2","name":"User","title":"2","parentID":"1","base":"0"}, 
{"id":"3","name":" User","title":"3","parentID":"1","base":"0"}, 
{"id":"4","name":"User","title":"4","parentID":"1","base":"0"}]; 

createList(resp); 
setDragDrop(); 


function createList(data){ 

jQuery.each(data, function() { 

    var baseUsed =false; 
    if(this.base == 1 && baseUsed ==false){ 

     //Problem in the setup of the HTML 
     $('.containers').append("<div class='popup' id='parentID_"+this.id+"'><div class='header'>"+this.name+" ("+this.title+")</div><div class='content'></div></div>"); 

     baseUsed = true;//to stop replication 

    }else{ 

     $('#parentID_'+this.parentID).append("<div id='parentID_"+this.id+"' class='popup'><div class='header'>"+this.name+" ("+this.title+")</div><div class='content'></div></div>"); 
    } 

}); 

} 

function setDragDrop(){ 


    $('.containers .popup').droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     // accept: '.object', 
     out: function() { 
      $(this).droppable("option", "disabled", false); 
     }, 
     drop: function(event, ui) { 

      var targetId = this.id; 
      var userId = (ui.draggable).get(0).id; 

      $(ui.draggable).addClass("insidePopup"); 
      ui.draggable.detach().appendTo($(this)); 
     } 
    }); 


    $('.popup').draggable({ 
     helper: 'clone', 
     containment:"parent" 
    }); 
} 
}); 

Answer 1

ich es geschaffen haben, um tatsächlich den abwerfbaren Teil zu beheben, so dass es innerhalb des Tropfen .content Ich muss nur den Setup-Teil herausfinden.

Code modifiziert $ ('Behälter .popup .content'). Abwerfbaren ({