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.