Question

我有以下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"
    });
}
});

Answer 1

我已经设法实际修复了droppable部分，所以它落在.content中我只需要找出设置部分。

代码已修改 $（＆＃39; .containers .popup .content＆＃39;）。droppable（{

Jquery拖放问题

1 个答案: