動的に作成されたdrappableを別のdroppableの中にドロップすることはできません

Question

jsfiddleを参照してください。

は、私が追加する新しいドラッグ＆ドロップ（jQueryのUI）によってそれ別のdiv（Button in my example）に追加することができdiv（Row in my example）。

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

// helper function 
function addNewRow() { 
    $row = $(document.createElement('div')); 
    $row.attr("id","droppableDiv"); 
    $row.html("drop here"); 
    $row.droppable({ 
     accept: ".buttonDashboard", 
     // greedy: true, 
     drop: function (ev, ui) { 
     alert('ok');      
     }, 
    }); 
    return $row; 
} 

私はokメッセージが表示されるだろうと予想してdivをドロップすることにより：私はヘルパー関数で新しいDIV（$row）（addNewRow）を作成し、ドラッグのために新しい機能を追加し、それはこのように別のDIVをドロップ

buttonDashboardクラスからdivとrowDraggableであるが、drop関数は起動しません。

drop機能をヘルパー機能に追加するのは間違いありませんか？

正しくない場合、その解決策は何ですか？

ありがとうございます。

Answer 1

私はあなたのコードを再構築helper機能からdroppable初期化コードを削除しているあなたのjsfiddleとcreated a new DEMO which works

を変更しました。ここで

が変更されたコードです：

var rowIndex = 0; 
var buttonIndex = 0; 

$(init); 

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

    $('#content').droppable({ 
        greedy: true, 
      accept: ".rowDashboard", 
      drop: function (ev, ui) { 
       ui.helper.attr('style', ''); 
       $(ui.helper).addClass('rowDraggable'); 
       $item = $(ui.helper).clone(); 
       $item.appendTo('#content'); 
       //console.log('dropped'); 
       $item.droppable({ 
        accept: ".buttonDashboard", 
        greedy: true, 
        drop: function (ev, ui) { 
        alert('ok');      
        }, 
       }); 
      }, 
     });  

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

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

function addNewRow() { 
    $row = $(document.createElement('div')); 
    //$row.attr("id","droppableDiv"); 
    $row.html("drop here"); 

    return $row; 
}