SO - 19803254

by mike guan

HTML

<div id="boxes_holder" class="initBox">
    <li>
        <div draggable="true" class="boxes" style="text-align:center;">1</div>
    </li>
    <li>
        <div draggable="true" class="boxes" style="text-align:center;">2</div>
    </li>
    <li>
        <div draggable="true" class="boxes" style="text-align:center;">3</div>
    </li>
</div>
<div id="dragBox" class="initBox">
    <div id="dragBoxTitle" class="">Box:</div>
</div>

CSS

#dragBox {
    width:100px;
    height:100px;
    border:0px;
    display: inline-block;
    float: right;
    vertical-align:top;
    background-color:#FBFBFB;
    list-style-type: none;
}
#boxes_holder {
    width:100px;
    height:100px;
    border:0px;
    display: inline-block;
    float: left;
    vertical-align:top;
    background-color:#FBFBFB;
    list-style-type: none;
}

JavaScript

$(document).ready(function () {
    $('#boxes_holder, #dragBox').sortable({
        connectWith: '.initBox'

    });
});