Bootstrap 3 Draggable Dialog

Make a bootstrap dialog draggable

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="modal_" style="position:absolute;">
    <div class="modal-dialog">
        <div class="modal-content">                    
            <div class="modal-body">
                <textarea name="" id="" cols="30" rows="10"></textarea>    
            </div>        
        </div>
    
    </div>
</div>
<div class="panel panel-footer" ></div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.modal_{
    top : 15px;
    left : 15px;
}

JavaScript

function log(text){
    $('.panel-footer').text(text);
}
$('button').click(function(){
   $('.modal').show('fade')
});

var oldX = 0;
var oldY = 0;
var mouseDown = false;
 $('.modal_').mousedown(function(e){
   log('mousedown');
   oldX = e.clientX;
   oldY = e.clientY;
    console.log(oldX);
    mouseDown = true;
}) .mouseup(function(e){
   log('mosueup');
    mouseDown = false;
}) 
.mousemove(function(e){    
    if(mouseDown ){
        self = $(this);      
      var top = parseInt(self.css('top').replace('px', ''));
       var left = parseInt(self.css('left').replace('px', ''));
         
        log(left + (oldX - e.clientX)  + ' , ' + top);
        self.css('left', (left + e.clientX-oldX) + 'px');
        self.css('top', (top + e.clientY-oldY) + 'px');
 
        oldX = e.clientX;
        oldY = e.clientY;
    }
}  
);
$('.modal_').on('dragstart', function(event) { event.preventDefault(); });