title: Draggable and Sortable Portlets // jQuery
body: <p>Trying to figure out but still cant find a way how I can make one droppable and sortable target for few draggable portlets.
  I based on this tutorial: 
  <a href="http://jqueryui.com/sortable/#portlets" rel="nofollow noreferrer">http://jqueryui.com/sortable/#portlets</a></p>
  
  <p>What i'm trying to do is <img src="https://i.stack.imgur.com/gGUqS.png" alt="Enter image description here"></p>
  
  <p>The idea is to drag small portlets in to big red portlet (i already success to do) but i want to do it with aligning horizontally (means sorting, not just dropping it wherever), i succeed also to do it verticaly, not good for me( </p>
  
  <p>My current js code looklike this (tried already different combinations):</p>
  
  <pre><code>    $(function() {
      $( "#draggablegrey" ).draggable({   });
  
      $( "#draggableblue" ).draggable({
       connectWith: '#droppable',
  
  
      });
  
   $( "#droppable" ).sortable({
       connectWith: '#droppable'  }); });
  </code></pre>