Jquery拖放问题答案

【问题标题】：Jquery drag + drop issueJquery拖放问题
【发布时间】：2016-04-19 03:15:50
【问题描述】：

我有以下 JSfiddle 代码（下面的链接） .我在修复它时遇到问题，因此可以在白框区域内拖动这些项目。

场景：用户 1 框是基础，所有其他用户框应位于用户 1 白色内容 DIV 内。然后，例如，如果您将用户 4 拖到用户 2 中，则用户 4 应该在用户 2 的白色内容框中，依此类推。目前它只会拖入用户 2 框的灰色部分。

关于如何设置 DIV 的任何想法？

我知道它与 HTML 设置有关，只是想不出如何修复它

'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"
    });
}
});

【问题讨论】：

标签： jquery html draggable droppable

【解决方案1】：

我已经设法真正修复了可放置部分，所以它会放在 .content 中，我只需要弄清楚设置部分。

代码已修改 $('.containers .popup .content').droppable({

【讨论】：