ドラッグ＆ドロップ：ドラッグ可能にドロップ可能に追加

Question

私はプロジェクトhttp://jsfiddle.net/x5T4h/566/を持っています。

は、HTML：

<div class="dropable base"> 
    <div class="draggable">Div1</div> 
    <div class="draggable">Div2</div> 
    <div class="draggable">Div3</div> 
    <div class="draggable">Div4</div> 
</div> 

<div class="places"> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
    <div class="droppable">Move here div</div> 
</div> 

のjQuery UI：

1. は、それがドロップされたときにドロップ可能に付加ドラッグしてください：

   $('.droppable').droppable({ tolerance: "touch" }); 
   $('.draggable').draggable({ revert: "invalid" }); 
   $('.base').droppable(); 
   

   は私がしたいです。私は ヘルパーとappendTo関数を使用しようとしましたが、それは私が を探しているように動作しません。ドラッグ可能なドラッグ可能な位置を同じ位置にして、そのドロップ可能と同じサイズ（例外クラス.base）の としたい。それはdrappable上のdraggableのように見えるはずです 同じ場所でdroppable。私はすべてを試みた。

2. 1つのドロップ可能にドロップできるのは、1つのドロップ可能なものだけです。

私はすべてを試しましたが、期待したように動作しませんでした。

Answer 1

これを実行する方法はたくさんありますが、あなたの質問で探しているものが完全にはっきりしていません。ここに私の提案。

実施例：http://jsfiddle.net/Twisty/x5T4h/568/

はJavaScript

$(function() { 
    $('.droppable').droppable({ 
    tolerance: "touch", 
    drop: function(e, ui) { 
     $(this).append(ui.draggable); 
     $(this).find(".draggable").css({ 
     position: "absolute", 
     top: 0, 
     left: 0, 
     margin: "-1px", 
     width: $(this).width() + "px" 
     }); 
     $(e.target).droppable("disable"); 
    } 
    }); 
    $('.draggable').draggable({ 
    revert: "invalid", 
    zIndex: 1000 
    }); 
    $('.base').droppable(); 
}); 

お役に立てば幸いです。