添加可拖动元素的jQuery UI动态的div

Question

我想补充row (div)，然后用拖放的方式，jQuery的添加button到row UI这样的：（jsfiddle）

HTML

<div class="rowDashboard">Row</div> 
<div class="buttonDashboard">Button</div> 
<div id="content"></div> 

脚本

var rowIndex = 0; 
var buttonIndex = 0; 

$(init); 

function init() { 
    $('.rowDashboard').draggable({ 
     containment: '#content', 
     cursor: 'move', 
     helper: addNewRow,  
     revert: "invalid", 
    }); 

    $('#content').droppable({  
     accept: ".rowDashboard", 
     drop: function (ev, ui) { 
      ui.helper.attr('style', ''); 
      $(ui.helper).addClass('rowDraggable'); 
      ui.helper.clone().appendTo('#content'); 
     }, 
    }); 

    //------ sortable rows -------------- 
    $("#content").sortable({ 
     cancel: ".fixed" 
    }); 
    $("#content").disableSelection(); 
    // ---------------------------------- 

    //------- buttonDraggable ----------- 
    $('.buttonDashboard').draggable({ 
     containment: '#content', 
     cursor: 'move', 
     helper: addNewButton, 
    }); 
    // ---------------------------------- 

    $('.rowDraggable').droppable({  
     accept: ".buttonDashboard",  
     drop: function (ev, ui) { 
      ui.helper.attr('style', ''); 
      $(ui.helper).addClass('buttonDraggable'); 
      ui.helper.clone().appendTo($(this)); 
     }, 
    }); 
} 

function addNewButton() { 
    buttonIndex++; 
    return '<input type=\'button\' value=\'button ' + buttonIndex + ' \'> </input>'; 
} 

function addNewRow() { 
    rowIndex++; 
    return '<div> Row ' + rowIndex + ' </div>'; 
} 

但我不知道为什么button不会被添加到row。

如果有人能够解释这个问题的解决方案，这将是非常有益的。

Answer 1

我找到了解决这个问题。我在创建row元素之前应用droppable。

我编辑的这部分（Solution JSFiddle）：

$('#content').droppable({  
     accept: ".rowDashboard", 
     drop: function (ev, ui) { 
      ui.helper.attr('style', ''); 
      $(ui.helper).addClass('rowDraggable'); 
      ui.helper.clone().appendTo('#content'); 
     }, 
    }); 

到：

$('#content').droppable({ 
    accept: ".rowDashboard", 
    drop: function (ev, ui) { 
     ui.helper.attr('style', ''); 
     $(ui.helper).addClass('rowDraggable'); 
     $item = $(ui.helper).clone(); 
     $item.appendTo('#content'); 
     enableDroppable($item); // Dynamically enable droppable property of new row. 
    }, 
}); 

// this method enables droppable property item 
function enableDroppable($item) { 
    $item.droppable({ 
     accept: ".buttonDashboard", 
     drop: function (ev, ui) { 
      ui.helper.attr('style', ''); 
      $(ui.helper).addClass('buttonDraggable'); 
      ui.helper.clone().appendTo($(this)); 
     }, 
    }); 
} 

Answer 2

修改此代码的行14：

$('#content').droppable({  
    accept: ".rowDashboard, .buttonDashboard", 
    drop: function (ev, ui) { 
     ui.helper.attr('style', ''); 
     if(ui.draggable.hasClass('rowDashboard')) { 
      $(ui.helper).addClass('rowDraggable'); 
     } else { 
      $(ui.helper).addClass('buttonDraggable'); 
     } 

     $(ui.helper).addClass('rowDraggable'); 
     ui.helper.clone().appendTo('#content'); 
    }, 
});