Блок с перемещением мышью

Перемещайте блок, нажав и удерживая левую кнопку мыши на заголовке окна.

Перетаскиваемый блок

X

Исходный код этого примера:

<style>
    #showimage {
        position: absolute;
        width: 250px;
        border: 2px solid #000080;
    }
    .showimage_title {
        background-color: #000080;
        display: flex;
        height: 40px;
        justify-content: space-between;
        line-height: 36px;
        width: 100%;
    }
    .showimage_title > div {
        padding: 0 5px;
    }
    .showimage_title div:first-child {
        color: white;
        cursor: move;
    }
    .showimage_title div:last-child {
        color: yellow;
        cursor: pointer;
        width: auto;
    }
    .showimage_content {
        background-color: white;
        text-align: center;
    }
    .showimage_content img {
        width: 200px;
        height: auto;
    }
</style>
<script type="text/javascript">
var dragswitch=0;
var nsx;
var nsy;
var nstemp;
function gons(e){
	temp.captureEvents(Event.MOUSEMOVE);
	nsx=e.x;
	nsy=e.y;
}
function dragns(e){
	if (dragswitch==1){
	   temp.moveBy(e.x-nsx,e.y-nsy);
	   return false;
	}
}
function stopns(){
	temp.releaseEvents(Event.MOUSEMOVE)
}
function drag_drop(e){
if (dragapproved){
	crossobj.style.left=tempx+e.clientX-offsetx+"px";
	crossobj.style.top=tempy+e.clientY-offsety+"px";
	return false;
	}
}
function initializedrag(e){
	crossobj=document.getElementById("showimage");
	var firedobj=e.target;
	var topelement="html";
	while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
		firedobj=firedobj.parentNode
	}
	if (firedobj.id=="dragbar"){
	   offsetx=e.clientX;
	   offsety=e.clientY;
	   tempx=parseInt(crossobj.style.left);
	   tempy=parseInt(crossobj.style.top);
	   dragapproved=true;
	   document.onmousemove=drag_drop;
	}
}
document.onmouseup=new Function("dragapproved=false")
function hidebox(){
    document.getElementById("showimage").style.visibility="hidden";
}
</script>

<div id="showimage" style="left: 40px; top: 100px;">
    <div class="showimage_title">
        <div id="dragbar" onMousedown="initializedrag(event)" onMouseover="dragswitch=1;" onMouseout="dragswitch=0">
            Перетаскиваемый блок
        </div>
        <div onClick="hidebox();return false" title="Закрыть">X</div>
    </div>
    <div class="showimage_content">
        <img src="../ann.jpg">
    </div>
</div>