<div id="modalDialog" class="messageBox autoclose" draggable="true">
    <div class="modal-header">
       //modal html
    </div>
    <div class="modal-body">
       //modal html
    </div>
    <div class="modal-footer">
       //modal html
    </div>
 </div>

self.deactivate = function () {
        //need to clear events since they will be added at next call
        document.ondrag = null;
        document.ondragend = null;
     };
     self.compositionComplete = function () {
        document.ondrag = StartDragging;
        document.ondragend = StopDragging;
     };

     function StopDragging() {
        document.onmousemove = null;
     }

     function StartDragging(e) {
        if (e == null)
           var e = window.event;

        // this is the actual "drag code"
        modalLeft = e.clientX;
        modalTop = e.clientY;

        $('#modalDialog').offset({
           top: modalTop,
           left: modalLeft
        });
     }

$(function() {
   $( "#draggable" ).draggable();
});

$(function() {
  $( "#draggable" ).draggable();
  $( "#droppable" ).droppable({
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
 });
});

var draggingMyModal;
        var bodyX;
        var bodyY;

        $(document.body).on('mousemove', function (e) {
           bodyX = (e.pageX) - ($('#myDialog .modal-header').width() / 2);
           bodyY = (e.pageY) - ($('#myDialog .modal-header').height() / 2);
           if (draggingMyModal) {
              draggingMyModal.offset({
                 top: bodyY,
                 left: bodyX
              });
           }
        });

        $(document.body).on("mousedown", "#myDialog .modal-header", function (e) {
           draggingMyModal= $('#myDialog');
        });

        $(document.body).on("mouseup", function (e) {
           draggingMyModal= null;
        });