如何修改可拖拽图片初始位置？解决部分图片位置失效问题

问题原因分析 #

1. JS代码覆盖CSS设置：你的JavaScript循环中给所有.mydiv元素强制设置了left属性（从5px开始依次排列），行内样式优先级高于CSS，导致除#one、#two外的元素CSS位置被覆盖。
2. CSS语法错误：#three的top和left属性值与单位之间有空格（如459 px），这是无效的CSS语法，浏览器无法识别。
3. 定位属性缺失：#three未设置position: absolute，而.mydivheader默认不是绝对定位，无法生效top/left属性。

修复步骤 #

1. 修复CSS错误 #

修改#three的CSS规则，补全定位属性并修正语法：

#three {
  position: absolute;
  top: 459px;
  left: 100px;
}

2. 移除JS中覆盖位置的代码 #

删除JavaScript循环里的以下两行，让CSS中设置的初始位置生效：

mydivs[i].style.left = offset + "px";
offset = offset + mydivs[i].offsetWidth + 5;

修改后的完整JS代码：

//Make the DIV element draggagle:
var mydivs = document.getElementsByClassName("mydiv");
for (var i = 0; i < mydivs.length; i++) {
  dragElement(mydivs[i]);
}

function dragElement(elmnt) {
  var pos1 = 0,
    pos2 = 0,
    pos3 = 0,
    pos4 = 0;
  if (elmnt.getElementsByClassName("mydivheader")[0]) {
    elmnt.getElementsByClassName("mydivheader")[0].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;
  }
}

调整初始位置的方法 #

方法1：通过CSS静态设置 #

直接修改对应元素ID的top和left属性值即可，例如：

#one {
  position: absolute;
  top: 200px; /* 修改为目标垂直位置 */
  left: 800px; /* 修改为目标水平位置 */
}

方法2：通过JS动态设置 #

如果需要在代码运行时动态调整位置，可以在循环中针对特定元素设置，例如：

for (var i = 0; i < mydivs.length; i++) {
  dragElement(mydivs[i]);
  // 给第三个元素设置初始位置
  if(mydivs[i].querySelector('.mydivheader').id === 'three'){
    mydivs[i].style.top = '459px';
    mydivs[i].style.left = '100px';
  }
}

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