Test Case Boilerplate

Fork this way...

by arpowers

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div class="container sortable_area">
    <div class="column sortable sortable_area">
        <div class="sortable s1"></div>
        <div class="sortable s1"></div>
        <div class="sortable s1"></div>
    </div>
    <div class="column c2 sortable sortable_area">
        <div class="sortable s1 sub2"></div>
        <div class="sortable s1 sub2"></div>
        <div class="sortable s1 sub2"></div>
    </div>
    <div style="clear: both;"></div>
</div>

CSS

.container{
    outline: 1px dashed orange;
}
.column{
    width: 50%; 
    float: left; 
    margin: 2%;
    outline: 1px dashed #35eafd;
    padding: 2%;
}

.column.c2{
    width: 30%;
}

.s1{
    /* 
    This float is the problem!   
    Try it with an without...        
    */
    float: left;
    
    width: 100%;
    height: 50px;
    background: #f1fcfd;
    outline: 1px solid #35eafd;   
    margin-bottom: 10px;
}
.sub2{ 
    outline: 1px solid #ffbe9b;   
    background: #fff7f3;
}

.placeholder{
    background:#f2fdf1;
}

JavaScript

jQuery('.sortable_area').sortable({
                items: ".sortable",
                dropOnEmpty: true,
                forcePlaceholderSize: true,
                forceHelperSize: false,
                connectWith: ".column",
                scrollSensitivity: 200,
                scrollSpeed: 40,
                placeholder: "placeholder",
                cursor: "move",
                distance: 0.5,
                delay: 100,
                opacity: 0.6,
                tolerance: "pointer",
                
                
});