jQuery UI Current

by petersendidit

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

No Helper display = inline
    <div id="Sort1">
        <div class="item"><span>Item 1</span></div>
        <div class="item"><span>Item 2</span></div>
        <div class="item"><span>Item 3</span></div>
        <div class="item"><span>Item 4</span></div>
    </div>
    With Helper display = block
    <div id="Sort2">
        <div class="item"><span>Item 5</span></div>
        <div class="item"><span>Item 6</span></div>
        <div class="item"><span>Item 7</span></div>
        <div class="item"><span>Item 8</span></div>
    </div>

CSS

#Sort1
    {
        width: 800px;
        height: 50px;
        border: 1px solid #000;
        background: #e7e7e7;
    }
    #Sort1 .item
    {
        display: inline;
        border: 1px solid #ff0000;
    }
    
    #Sort2
    {
        width: 200px;
        height: 500px;
        border: 1px solid #000;
        background: #e7e7e7;
    }
    
    #Sort2 .item
    {
        display: block;
        border: 1px solid #0000ff;
    }
    
    .item span
    {
        padding: 2px;
        margin: 2px;
        background: #52BAFF;
        border: 1px solid #5297FF;
        white-space: nowrap;
        
    }
    .helper span
    {
        padding: 2px;
        margin: 2px;
        background: #FFC881;
        border: 1px solid #FF9B82;
        white-space: nowrap;
    }

JavaScript

$("#Sort1").sortable({ connectWith:"#Sort2" });
$("#Sort2").sortable({ connectWith:"#Sort1", helper:dragHelper });
    
function dragHelper(e, ui) {
    return $("<div>")
    .addClass("helper")
        .html(ui.html());
}