Jquery draggable with bootstrap

by Pankaj Sapkal

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="row grid span8">
    <div class="well span2 tile">A</div>
    <div class="well span2 tile">B</div>
    <div class="well span2 tile">C</div>
    <div class="well span4 tile">D</div>
</div>

CSS

.placeholder {
    border: 1px solid green;
    background-color: white;
    -webkit-box-shadow: 0px 0px 10px #888;
    -moz-box-shadow: 0px 0px 10px #888;
    box-shadow: 0px 0px 10px #888;
}
.tile {
    height: 100px;
}
.grid {
    margin-top: 1em;
}

JavaScript

$(function () {
    $(".grid").sortable({
        tolerance: 'pointer',
        revert: 'invalid',
        placeholder: 'span2 well placeholder tile',
        forceHelperSize: true
    });
});