Jquery UI Droppableがコンテナ内で横方向に自動的に整列する

Question

Jquery UI Drag & Dropで作業しています。ドロップコンテナdivにdivをドロップすると、自動的に水平に整列されます。私はいくつかのR & Dを試して、それを縦に整列させるが、それを水平に変更することはできないコードを得る。

スクリプト：

$(function(){ 
    $('#add').click(function(){ 
     $('#container').append('<div class="ui-widget-content draggable">Zone<i class="fa fa-pencil-square-o">&nbsp;&nbsp;&nbsp;</i><i class="fa fa-times"></i></div>'); 
     $(".draggable").draggable(); 

     $('.dropTarget').droppable({ 
      drop: function(ev, ui) { 
       $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); 
      } 
     }); 
    }); 
}); 

HTML：

<a href="javascript:void(0);" id="add">Add Zone</a> 
<div id="container" style="height: 100px;"></div> 
<div class="dropTarget" style="float: left; border:1px solid black; height: 200px; width: 200px;"></div> 

Working Fiddle

Answer 1

何私のために役立ったことは

.draggable { 
    float: left; 
    /* rest of the css */ 
} 

を追加しているが、この情報がお役に立てば幸い！