DND - FORCE SCROLL - #1

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="phase-scroll">
    <ul class="phases row">
    </ul>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.phase-scroll {
    width: 100%;
    xoverflow: auto;
}

h2 {
    cursor: move;
    background: #ccc;
    margin: 0;
    padding: 5px;
}

.phases {
    white-space: nowrap;
}

.phase {
    display: inline-block;
    vertical-align: top;
    width: 120px;
    margin: 0 10px;
    border: 1px solid #222;
}

.phase-block {
    max-height: 300px;
    overflow: auto;    
}

.item {
    border: 1px solid #ccc;
    padding: 5px;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */
jQuery(function($){
    var $phases = $('.phases');
    for (var i=0; i<10; i++) {
        var $phase = $('<li />').addClass('phase').append('<h2>+</h2>');
        var $block = $('<div/>').addClass('phase-block');
        
        for (var j=0; j< 20; j++) {
            var $item = $('<div/>').text('Item').addClass('item');
            $block.append($item);
        }
        
        $phase.append($block);
        $phases.append($phase);
    }
    
    $('.phases').sortable({
        handle: 'h2',
        scroll: true
    });
    
    $('.phase-block').sortable({
        scroll: true,
        connectWith: '.phase-block',
        appendTo: '.phase-scroll',
        helper: 'clone'
    });
});