Bootstrap 3 modal: make it movable/draggable without jquery-ui

I'm tring to develop some things:

• make a bootstrap modal draggable/movable on the window without jquery-ui

I use backbone.js but I think this is not so important. In a piece of code I define my bootstram modal:

<div id="detailsContainer">
<div class="modal fade" id="someId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> Some Title</h4>
        </div>
        <div class="modal-body" id="content">

            <form class="form-horizontal" role="form" id="modalFormBody">
                ... some content
            </form>    

        </div>
        <div class="modal-footer">
            <div class="pull-right" id="modalButtonBar">
                <button type="button" class="btn btn-default control-button" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary control-button" id="addButton">Add</button>
            </div>                  
        </div>
    </div>
</div>

Now when I try to use set the modal draggable with this code:

 var $container = $("#detailsContainer");
 $container.on('mousedown', 'div', 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');
                });
            });
            e.preventDefault();
        }).on('mouseup', function() {
            $('.draggable').removeClass('draggable');
        });

the behaviour is strange:

• when I pick up the modal the modal goes out of window. I tried to fix changing some values to top and left, but nothing has been good.
• when I pick some under element of the modal-body (for example an Input text), then I can move arround in the modal the input text. But I don't want this! I only want that the whole modal can be draggable/movable.

The example above I have found it on stackoverflow (Sorry I don't find the link on it). I find also some example with jquery-ui. But I don't want to use it. Only Jquery.

I have also tried: Dialog draggable, and JQuery Draggable Demo. But without success. The first one don't make my modal draggable, and the second one I din't understand how to use it with $container

Can someone help me?

Update

        $('body').on('mousedown', '.modal-dialog', 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');
                 });
             });
             e.preventDefault();
         }).on('mouseup', function() {
             $('.draggable').removeClass('draggable');
         });

But when I want to drag... it changes the position of where I picked it up the modal. It goes on the corner. Not there where I picked it up? How can I correct this? It's wrong to put the ".modal-dialog" on the mousedown function? And If this is wrong, which element I have to put it there?

And an other point: the elements that I have in the modal body (example drop down) must not be draggable. How can I exclude them?

try this code surely it'll helps you, below code is without jquery ui

check this updated fiddle check here

$(function() {
    $('body').on('mousedown', '#myModal', function(ev) {
        $(this).addClass('draggable').parents().on('mousemove', function(e) {
            $('.draggable').offset({
                top: e.pageY - $('.draggable').outerHeight() /8,
                left: e.pageX - $('.draggable').outerWidth() /8
            }).on('mouseup', function() {
                $(this).removeClass('draggable');
            });
        });
        ev.preventDefault();
    }).on('mouseup', function() {
        $('.draggable').removeClass('draggable');
    });
});

body {padding:50px;}

div {
  cursor:move;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>