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

i have been working @ making durandal modals draggable off , on several days. there tons of info out there, , never of them work. tutorials, stackoverflow questions, , other such informational sources had these long elaborate code blocks job done. on w3.org website, less complicated-yet had hard time making drag methods work on durandal modal since added dom dynamically. ended copy-paste-deleting , trial-and-error methods until got working (though bit jumpy) on few lines of code , draggable attribute. want know if missing something...since easier found...or because things have come along far enough since of posts found 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 clear events since added @ 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;          // actual "drag code"         modalleft = e.clientx;         modaltop = e.clienty;          $('#modaldialog').offset({            top: modaltop,            left: modalleft         });      } 

edit: looking without additional libraries... have posted answer below new code.

as have tagged jquery, why not use jquery ui draggable? http://jqueryui.com/draggable/

the code literally

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

and there number of options can add draggable increase functionality..

there jquery droppable: https://jqueryui.com/droppable/ can used draggable allow droppable locations:

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

please check fiddle: http://jsfiddle.net/jfit/qs3tf/