多Draggable <div>图标拖动失效求助（避免重复JS代码）

问题原因 #

1. ID重复违反规范：HTML中元素ID必须唯一，你重复使用mydiv作为两个图标容器的ID，document.getElementById("mydiv")只会返回第一个匹配的元素，导致第二个图标从未绑定拖动事件。
2. 事件绑定范围不足：原代码仅调用了一次dragElement，只处理了第一个元素，没有遍历所有需要拖动的图标容器。

解决步骤 #

1. 替换ID为类选择器：将所有拖动容器的id="mydiv"改为class="draggable-div"，实现批量选中元素。
2. 更新CSS匹配规则：把CSS中的#mydiv改为.draggable-div，确保样式应用到所有容器。
3. 批量绑定拖动事件：用document.querySelectorAll(".draggable-div")获取所有可拖动容器，循环调用dragElement为每个元素绑定逻辑。

修改后的完整代码 #

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8"> <!-- 修正原编码标签错误 -->

<style>
p,a{font-size:18px;}

img {
    height:80px;
    width:80px;
}

body {
    border:2px solid black;
    z-index:-1;
    background:linear-gradient(#9d4bdd,#7c3ba3,#6425b1);
    position: relative; /* 修正定位基准，确保绝对定位元素正确偏移 */
}

.draggable-div {
    position: absolute;
    z-index: 9;
    background:linear-gradient(white,grey,white);
    border:2px solid black;
    padding:10px;
    cursor: move; /* 直观提示元素可拖动 */
}
</style>

<body>
    <div class="draggable-div">
        <a target="_blank" title="Microsoft Learn" href="https://learn.microsoft.com/en-ca/">
            <img src="C:\Users\Mr\Downloads\Programmy\Html\Websties\Christophertm\dt\mslogo1.jpg"></a>
        <h5>Microsoft Learn</h5>
    </div>

    <div class="draggable-div">
        <a target="_blank" title="Visual Studio" href="https://visualstudio.microsoft.com/">
            <img src="C:\Users\Mr\Downloads\Programmy\Html\Websties\Christophertm\dt\vslogo1.jpg"></a>
        <h5>Visual Studio</h5>
    </div>

<script>
// 批量获取所有可拖动容器并绑定事件
document.querySelectorAll(".draggable-div").forEach(el => dragElement(el));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  // 直接绑定到容器本身，无需额外header元素
  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;
  }
}
</script>
</body>

额外优化说明 #

• 修正了原代码中<link charset="UTF-8">的错误，改用标准的<meta charset="UTF-8">设置页面编码。
• 将body的position:auto改为position:relative，确保绝对定位的拖动容器以body为基准偏移。
• 给.draggable-div添加cursor:move，提升用户操作直观性。

内容的提问来源于stack exchange，提问作者Jedininja28