Drag 'mydiv' element with header

by Tan

HTML

<div id="bg">
 <div id="res1"></div> 
  <div id="res2"></div> 

<div class="icon" id="icon1">
<div></div>
My Photos
</div>

<div class="icon" id="icon2">
<div></div>
My New Folder
</div>

<div id="mydiv" class="mydiv">
  <div id="mydivheader" class="mydivheader"><div class="x_close">X</div>Desktop / Photos 1</div>
  <div class="bod">
  <p>Move here to move Potato Cheese</p>
  <p>this</p>
  <p>We hope that you will be happy with the service received, however where we do receive a complaint or we become aware of customer concerns or unease, we aim to handle the matter as quickly as possible through our appropriate, transparent and effective complaints procedure which gives priority to resolving customer
dissatisfactions as efficiently, clearly and fairly as possible, within a reasonable
timescale.
</p>
</div>
</div>

<div id="mydiv2" class="mydiv">
  <div id="mydiv2header" class="mydivheader"><div class="x_close">X</div>Desktop / Photos 2</div>
  <div class="bod">
  <p>Move here to move Potato Cheese</p>
  <p>this</p>
  <p>We hope that you will be happy with the service received, however where we do receive a complaint or we become aware of customer concerns or unease, we aim to handle the matter as quickly as possible through our appropriate, transparent and effective complaints procedure which gives priority to resolving customer
dissatisfactions as efficiently, clearly and fairly as possible, within a reasonable
timescale.
</p>
</div>
</div>

</div>

CSS

* {box-sizing: border-box;}
body {margin:0;font-family:Arial;position:relative;}
#bg {width:100%;height:100%;position:fixed;background-color:rgba(0, 0, 0, 0.5);overflow:hidden;
}
.x_close {float:right;cursor:pointer;}
.mydiv {width:1000px;height:500px;position: absolute;left:50%;top:50%;transform: translate(-50%, -50%);
  background-color: #222222;
  border: solid #444444;
  border-width:2px;
  resize: both;
  overflow: auto;
color: #dedede;
border-radius:3px 3px 0 0;
z-index:1;
display:none;
}
.open {display:block;}

.mydivheader {position:sticky;top:0;
  padding: 8px 10px;
  cursor: move;
  z-index: 10;
  background-color: #333333;
  color: #dedede;
  border: solid #444444;
  border-width:0 0 2px 0;

}
.bod {padding:0 10px;}

.icon {width:70px;margin:10px 0 0 10px;text-align:center;font-size:14px;cursor:pointer;}
.icon div {width:50px;height:50px;margin:0 10px;border-radius:5px;}
#icon1 div {background-color:rgb(61, 61, 61);}
#icon2 div {background-color:rgb(43, 42, 42);}

@media (max-width: 1100px) { 
.mydiv {width:700px;}
}
@media (max-width: 800px) { 
.mydiv {width:500px;}
}
@media (max-width: 700px) { 
.mydiv {width:300px;}
}

JavaScript

function id(x) {var y = document.getElementById(x); return y;}

var res1 = id("res1");
var res2 = id("res2");

var bg = id("bg");

var window1 = id("mydiv");
var window2 = id("mydiv2");

id("icon1").addEventListener("click", (event) => {
  pushBack();
  window1.className = "mydiv open";
  window1.style.zIndex = "10";
});

id("icon2").addEventListener("click", (event) => {
  pushBack();
  window2.className = "mydiv open";
  window2.style.zIndex = "10";
});

//Make the DIV element draggagle:
dragElement(window1);
dragElement(window2);

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (id(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    id(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;

// calculate offscreen
bgHeight = bg.offsetHeight;
bgWidth = bg.offsetWidth;
elemHeight = elmnt.offsetHeight;
elemWidth = elmnt.offsetWidth;

var t = elmnt.offsetTop - pos2;
var l = elmnt.offsetLeft - pos1;

if (t < (elemHeight / 2)) {t = (elemHeight / 2);}
if (l < -(elemWidth / 2) + 100) {l = -(elemWidth / 2) + 100;}
if (t > (elemHeight / 2) + bgHeight - 50) {t = (elemHeight / 2) + bgHeight - 50;}
if (l > (elemWidth / 2) + bgWidth - 100) {l = (elemWidth / 2) + bgWidth - 100;}
    //...