user1554650 user1554650 - 6 months ago 31
jQuery Question

Sortable div jquery

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


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

#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;
}

<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>




Answer

Like this? https://jsfiddle.net/a7ukbgkd/ enter image description here

Just do this:

#drop .draggable
{
  float: left
}