Draggable div Without JQuery UI

See the Pen Draggable div without jQuery UI by satish mallick.

------------------------------------------------------
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
$(document).ready(function(e) {
 $(function() {
    $('#draggable').on('mousedown', function() {
        $(this).addClass('draggable').parents().on('mousemove', function(e) {
            $('.draggable').offset({
                top: e.pageY - $('.draggable').outerHeight() / 2,
                left: e.pageX - $('.draggable').outerWidth() / 2
            }).on('mouseup', function() {
                $(this).removeClass('draggable');
            });
        });
      
    }).on('mouseup', function() {
        $('.draggable').removeClass('draggable');
    });
});
  
});

<style>
    *{margin:0; padding:0;}
.one{width:600px; height:500px; margin:0 auto; border:1px solid #333; position:relative;overflow: hidden;}
.one .drag-one{position:absolute; top:0; left:0; width:100px; height:100px; border:1px solid #F00; cursor:move;}
.one .drag-one p{text-align:center;  margin: 33px 0 0; -moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-0-user-select:none;}

<style>

<div class="one">
        <div class="drag-one" id="draggable">
            <p>Drag Me !</p>
        </div>
  </div>


------------------------------------------------------