Sortable div issue. When I drag divs to the "drop" div. All divs are coming one below the other.

```
<div>1<div>
<div>2<div>
<div>3</div>

```

I need one div to come one after another in horizontal.
for eg.
In the Sortable div,it should be `<div>1<div><div>2<div><div>3</div>`
Html is as below

```js
   $("#origin").sortable({connectWith: "#drop"});
   $("#drop").sortable({connectWith: "#origin" });
```

```css
 #origin
{

  min-width: 600px;
  min-height: 120px;
}

#origin img, #drop img {
  margin-top: 3px;
  margin-left: 5px;
}

#drop
{
  background-color:yellow;
  min-height: 120px;
}
.over {
  border: solid 5px purple;
}
.draggable
{
  border: solid 2px gray;
  width:100px;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" ></script>
<div id="wrapper">
 <div id="origin" class="fbox">

<p></p>
     <div id="one_1"   class="draggable">one</div>
     <div id="two_2"   class="draggable">two</div>
     <div id="three_3" class="draggable">three</div>
 </div>
  <p>test</p>
 <div id="drop" class="fbox">

 </div>
</div>

```