Due to the declaration of position: absolute in your CSS for #mydiv, the elements are stacked on top of each other. This property removes the element from the normal document flow, causing it to overlap with other flowing elements as defined by the CSS.

Greg recommended using the CSS translate() function for movement instead of relying on position: absolute with values like top. This approach keeps the elements within the flow, ensuring they remain interactable.

Applying translate() after reflow ensures that adjusting draggable elements does not disrupt the layout.

If you're looking for just the outcome, feel free to skip ahead. For further detail:

_{Note: W3Schools may have outdated information or provide poor advice. It's advisable to supplement their articles with additional research.}

Modern browsers support HTML5, CSS3, and ES6 (JavaScript specification) along with various standards such as:

• Usage of const/let over var for defining block-scoped variables, aiding in debugging and conveying immutability vs. mutability of references.
• Utilization of Element.querySelector() to search descendants efficiently.
• Adoption of addEventListener()/removeEventListener() for managing event listeners effectively.
• Integration of (lambda) arrow functions as substitutes for traditional functions with non-hoisting behavior.
• Incorporation of semantic HTML tags to enhance web accessibility and comply with standards.

Additional points:

• Mastering CSS fundamentals before resorting to libraries can improve your understanding and skills.
• Familiarizing yourself with all HTML tags benefits comprehension, aids in creating accessible content essential for SEO.
• Acknowledging initiatives like schema.org by Google, Microsoft, etc., for standardizing data markup is crucial but may require extensive reading.

Refactoring

Removing pre-existing comments to accommodate new explanations.

Preference for single-quote (') in strings over double-quote (") in JavaScript code edits.

Transitioned from var to const or let based on context for better variable scoping.

Embracing addEventListener()/removeEventListener() replacing onevent-listeners for consistency.

Main changes highlighted below:

• In HTML:
  • Drags can utilize the draggable class.
  • Suitable tag usage includes:
    • Headers should be enclosed in <header>.
    • For draggables containing headers, employ <section>.
• In CSS:
  • Introduced rules for the draggable class.
  • Added enabling CSS properties when draggable also serves as a <section>.
• In JS:
  • Replaced pos0, pos1, etc., with xPos, yPos for clarity.
  • Updated position values using MouseEvent.movementX and movementY.
  • Revamped on-screen positioning via Element.styles.transform employing translate().

The most effective method I have discovered is to individually set the top and left properties for each element. This ensures that each element maintains its position without disrupting the draggable functionality:

const d = ["module1", "module2", "module3", "module4", "module5"];

for(i in d){
    append_module_name_to_drag_div(d[i], top, left);
    dragElement(document.getElementById(d[i]));  

    if(left < 220) {
        left = left + 39;
    } else {
        left = 5;
        top = top + 70; // height of marker is 70
    }
}

To enhance this function, I added two additional parameters to specify the values for top and left positions:

function append_module_name_to_drag_div(module_name, top, left) {
    var mydiv = document.createElement("div");
  
    mydiv.id = module_name;
    mydiv.className = 'col-sm-10';
    
    var mydivmarker = document.createElement("div");
    mydivmarker.id = module_name + "header";
    mydivmarker.className = 'mydivheader';
    var marker_image = new Image();
    marker_image.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png";
    marker_image.height = 45;
    marker_image.width = 35;
    mydivmarker.append(marker_image);

    mydiv.innerHTML = module_name;
    mydiv.append(mydivmarker);

    mydiv.style.left = left.toString() + "px";
    mydiv.style.top = top.toString() + "px";

    document.getElementById("markers").appendChild(mydiv);
    var linebreak = document.createElement("br");
    document.getElementById("markers").appendChild(linebreak);
}

This function is based on a W3Schools example with slight modifications specifically where the element's new position is updated:

function dragElement(elmnt) {
  
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();

    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;

    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();

    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;

    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Unique version of w3schools example

If you want to achieve a similar effect as demonstrated in the linked w3schools example, you can utilize the CSS property position: absolute. However, if you do not specify values for top, left, etc., the default values will be applied: top: 0 and left: 0. This will result in the elements stacking on top of each other due to them all appearing at the same location.

To prevent this stacking behavior, you need to assign different values for top, left, etc. to each absolutely positioned element. For instance:

#mydiv2 {
  top: 170px;
}

This solution addresses the scenario with two manually draggable elements, but may not be ideal for dynamically added content.

Functional demonstration:

To simplify the implementation, I omitted the initial if ... else block within the dragElement() function and directly attached the event listener to the entire element:

elmnt.onmousedown = dragMouseDown;

//Enable dragging for the DIV element:
dragElement(document.getElementById("mydiv2"));
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  
  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // Obtain the initial mouse cursor position:
    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;
    // Set the new position for the element:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    // Stop moving when the mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#mydiv, 
#mydiv2 {
  position :absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  cursor: move;
  border: 1px solid #d3d3d3;
}

#mydiv2 {
  top: 170px;
}

#mydivheader, 
#mydivheader2 {
  padding: 10px;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<div class="container">
<div class="row">
  <div id="mydiv" class="col-sm-10">
    <div id="mydivheader">Click here to move</div>
    <p>Move</p>
    <p>this</p>
    <p>DIV</p>
  </div>
  <div id="mydiv2" class="col-sm-10">
    <div id="mydivheader2">Click here to move</div>
    <p>Move</p>
    <p>this</p>
    <p>DIV</p>
  </div>
</div>
</div>

Applying transform: translate()

Basic setup

To handle dynamically generated content or cases where explicit positioning properties are not desired, consider utilizing transform: translate() while omitting position: absolute. This approach ensures that elements retain their positions without overlapping.

To implement this, adjust the existing calculation by subtracting the original values from the old translate values before updating them with this difference:

pos1 = pos1 - (pos3 - e.clientX);
pos2 = pos2 - (pos4 - e.clientY);

Lastly, modify the styling lines from using top and left to a single line with translate:

elmnt.style.transform = 'translate(' + (pos1) + "px, " + (pos2) + "px)";

Functional demonstration:

I updated the outdated var declaration to let since these variables are mutable.

//Enable dragging for the DIV element:
dragElement(document.getElementById("mydiv2"));
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  
  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // Obtain the initial mouse cursor position:
    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 = pos1 - (pos3 - e.clientX);
    pos2 = pos2 - (pos4 - e.clientY);
    pos3 = e.clientX;
    pos4 = e.clientY;
    // Set the new position for the element:
    elmnt.style.transform = 'translate(' + (pos1) + "px, " + (pos2) + "px)";
  }

  function closeDragElement() {
    // Stop moving when the mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#mydiv,
#mydiv2 {
  width: 160px;
  background-color: #f1f1f1;
  text-align: center;
  cursor: move;
  border: 1px solid #d3d3d3;
}

#mydivheader,
#mydivheader2 {
  padding: 10px;
  background-color: #2196F3;
  color: #fff;
}

<div class="container">
  <div class="row">
    <div id="mydiv" class="col-sm-10">
      <div id="mydivheader">Click here to move</div>
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>
    <div id="mydiv2" class="col-sm-10">
      <div id="mydivheader2">Click here to move</div>
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>
  </div>
</div>

Descriptive variable names

The variable names used in the w3schools example pos1, pos2, pos3, pos4 might not provide clear context. It would be beneficial to rename them for better clarity: translate = { x: 0, y: 0 } and client = { x: 0, y: 0 }.

Functional demonstration:

//Enable dragging for the DIV element:
dragElement(document.getElementById("mydiv2"));
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  let translate = { x: 0, y: 0 };
  let client = { x: 0, y: 0 };
  
  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // Obtain the initial mouse cursor position:
    client.x = e.clientX;
    client.y = 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:
    translate.x = translate.x - (client.x - e.clientX);
    translate.y = translate.y - (client.y - e.clientY);
    client.x = e.clientX;
    client.y = e.clientY;
    // Set the new position for the element:
    elmnt.style.transform = 'translate(' + (translate.x) + "px, " + (translate.y) + "px)";
  }

  function closeDragElement() {
    // Stop moving when the mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

#mydiv,
#mydiv2 {
  width: 160px;
  border: 1px solid #d3d3d3;
  text-align: center;
  cursor: move;
  background-color: #f1f1f1;
}

#mydivheader,
#mydivheader2 {
  padding: 10px;
  background-color: #2196F3;
  color: #fff;
}

<div class="container">
  <div class="row">
    <div id="mydiv" class="col-sm-10">
      <div id="mydivheader">Click here to move</div>
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>
    <div id="mydiv2" class="col-sm-10">
      <div id="mydivheader2">Click here to move</div>
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>
  </div>
</div>

Final version

For an integrated solution showcasing the functionality with dynamically added draggable components, refer to the following definitive implementation. I switched the outdated var declarations to const considering these variables remain constant.

Functional demonstration:

const d = ["module1", "module2", "module3", "module4", "module5"];

for(i in d) {
  append_module_name_to_drag_div(d[i]);
  dragElement(document.getElementById(d[i]));  
}
  
function append_module_name_to_drag_div(module_name) {
  const mydiv = document.createElement("div");
  mydiv.id = module_name;
  mydiv.className = 'module col-sm-10';

  const mydivmarker = document.createElement("div");
  mydivmarker.id = module_name+"header";
  mydivmarker.className = 'mydivheader';
  
  const marker_image = new Image();
  marker_image.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png";
  marker_image.height = 45;
  marker_image.width = 35;
  
  mydivmarker.append(marker_image);
  mydiv.innerHTML = module_name;
  mydiv.append(mydivmarker);
  document.getElementById("markers").appendChild(mydiv);
}

function dragElement(elmnt) {
  let translate = { x: 0, y: 0 };
  let client = { x: 0, y: 0 };
  
  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // Obtain the initial mouse cursor position:
    client.x = e.clientX;
    client.y = 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:
    translate.x = translate.x - (client.x - e.clientX);
    translate.y = translate.y - (client.y - e.clientY);
    client.x = e.clientX;
    client.y = e.clientY;
    // Set the new position for the element:
    elmnt.style.transform = 'translate(' + (translate.x) + "px, " + (translate.y) + "px)";
  }

  function closeDragElement() {
    // Stop moving when the mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

.module {
  width: 80px;
  border: 1px solid #d3d3d3;
  text-align: center;
  cursor: move;
  background-color: #f1f1f1;
}

.mydivheader {
  padding: 10px;
  background-color: #2196F3;
  color: #fff;
}

<div class="container">
  <div id="markers" class="row">
  </div>
</div>