Bootstrap jquery ui sortable

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> bootstrap jquery sortable</title>

  
  <script type='text/javascript' src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script type='text/javascript' src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script type='text/javascript' src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <script type='text/javascript' src="script.js"></script>



    <script type='text/javascript'>
        $(window).load(function(){
            script();
        });
    </script>

</head>

<body>
    <div .container-fluid>
        <div id="sidebar" class="col-sm-3 col-md-2 sidebar">
            <p></p>
        </div>
        <div id="wrapper">
            <div id="grid-container">
                <div class="container-fluid">
                    <div class="row"></div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

   function script(){
    tile = _.template('\
    <div class="col-xs-4 sortable">\
        <div class="tile">\
            <h1><%= number %></h1>\
        </div>\
    </div>');

    $(document).ready(function () {
        var dom = $('#wrapper .row'),
            domWidth = $('#sidebar p');

        for (var i = 1; i < 11; i++) {
            dom.append(tile({
                number: i
            }));
        }

        $('div.row').sortable({
            placeholder: 'col-xs-4 placeholder',
            helper: 'clone',
            items: '> .sortable',
            start: function(){},
            end:function(){},
            change:function(){}
        });

        $('.sortable').mousedown(function () {
            var item = $(this),
                offset = item.offset(),
                margins = {
                    left: (parseInt(item.css("marginLeft"), 10) || 0),
                    top: (parseInt(item.css("marginTop"), 10) || 0)
                };

            console.log(offset.top, offset.left, margins.top, margins.left);
        });
    });
   }

$(window).load(function () {

});


        
        #sidebar p {
            text-align: center;
            font-size: 16px;
            margin-top: 20px;
        }
        
        #wrapper {
            right: 0;
            margin: 0 0 0 100px;
            background-color: lightgrey
        }
        
        .tile {
            background-color: #fff;
            /*no padding prevents flipping*/
            /*padding: 15px 15px 0 15px;*/
            /*margint-bottom changed align on the top
            also adds space to between "start,change,end" events */
            margin-top: 30px;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
            height: 100px;
            text-align: center;
            cursor: move;
        }
        
        h1 {
            margin-top: 15px;
        }
        
        /*Added to have an small border bettween sortables and the container
        needed because sortables have no patting bottom*/
        #grid-container{
            padding: 10px;
        }
        /*Used to fill the gap for a dragged element*/
        .placeholder {
            border: 5px dashed #66ffcc; 
            height:100px; 
            border-radius:5px;
            margin-top: 30px;
        }