サブコントロールのドロップコントロールとjqueryを使用して新しいdivを追加する

Question

Note: I have tried other question asked in stackoverflow related to Drag and drop but i'm unable to do so.

最初に'Div'を'DropDiv'にドラッグアンドドロップします。次に、'Div Sub Panel'にテキストボックスをドロップしようとします。

私は'Div Sub Panel'で

1. ドロップテキストボックスにしたいです。
2. 私はその後、ここで

を動作しない機能'Add New Div 'をクリックして、私のDEMOコード

Answer 1

Only Update Draggable in connectTosortable in add one more add Class claspaneldiv

connectTosortable にclaspaneldivを追加ここ

$(".clsDragItem").draggable({ 
      connectToSortable: '#MainDroppableDiv,.claspaneldiv', 

はデモです：

http://jsfiddle.net/yb3dj5om/1/

Answer 2

である私はgready:trueは、ドキュメントの状態などのトリックを、行うだろうと思った：

by setting this option to true, any parent droppables will not receive the element

が、それはありません動作しないようです（私はsortableのためだと思います）。以下のコードは動作するようですが、確かにハックです。 MainDroppableDivの末尾にこれを追加すると、dropの機能が追加されます。

$('.claspaneldiv').droppable({ 
    greedy:true , 
    drop: function(event, ui) { 
     console.log('dropped inside!'); 
     $(this).html('<div>Textbox dropped inside, do your thing...</div>'); 
     //You may now append ui.draggable element or something 
     $('.MainDroppableDiv .clsDragItem.ui-draggable').remove(); 
    } 
}); 

Full demo here!