JavaScript jQuery dragging divs - is it really not that complicated?

Question

I have been working at making my Durandal modals draggable off and on for several days. There is tons of info out there, and I could never really get any of them to work. Most tutorials, stackoverflow questions, and other such informational sources often had these long elaborate code blocks to get the job done. On W3.Org website, it was much less complicated-yet I had a hard time making their drag methods work on this Durandal modal since it is added to the DOM dynamically. Finally I ended up copy-paste-deleting and trial-and-error methods until I got it working (though a bit jumpy) with on a few lines of code and the draggable attribute. What I want to know is if I am missing something...since it was much easier than what I found...or is it just because things have come along far enough since most of the posts I found that it just works?

HTML

 <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>

JS

     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
        });
     }

EDIT: I am looking to do this without additional libraries... have posted an answer below with new code.

Answer 1

In response to any asking about JQueryUI, I was trying to do it without, so I will edit my question to be sure this is known.

But for those who are also looking into this, it is pretty easy, though my code above did have some flaws. There may still be some reason why other code samples were more complicated, like some real refinement for many use case scenarios, but I have re-written it and its a lot better, though still needs some tweaking. Anyways, here's what I have for those who are interested.

        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;
        });

(ADDED) There are refinements that can be done, such as preventing text selection, and determining outer bounds...and if you wanted to do a ton of refinement-you may want to go with JQueryUI or some other library but if you're just looking for something quick and simple, you can use this.

Answer 2

As you have tagged JQuery, why not use JQuery UI Draggable? http://jqueryui.com/draggable/

the code is literally

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

and there are a number of options you can add into draggable to increase functionality..

there is also JQuery Droppable: https://jqueryui.com/droppable/ which can be used with draggable to allow droppable locations:

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

Please check this fiddle: http://jsfiddle.net/jFIT/qs3TF/