Javascript 将可拖动元件的设置位置设置为绝对位置

我想在画布上拖动一些元素，以返回它们的坐标。 所以元素应该彼此相邻，这样我就可以拖动它们了。 我面临的问题是，元素之间没有空间分隔：

我正在使用函数

dragElement（element）

from使我的元素可拖动

//使DIV元素成为draggagle：
DrageElement（document.getElementById（“mydiv”）；
DrageElement（document.getElementById（“mydiv2”）；
功能牵引装置（elmnt）{
变量pos1=0，pos2=0，pos3=0，pos4=0；
if（document.getElementById（elmnt.id+“header”））{
//如果存在，则标题是从中移动DIV的位置：
document.getElementById（elmnt.id+“header”）.onmousedown=dragMouseDown；
}否则{
//否则，请从DIV内的任何位置移动DIV：
elmnt.onmousedown=dragMouseDown；
}
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
//计算新光标位置：
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”；
}
函数closeDrageElement（）{
//释放鼠标按钮时停止移动：
document.onmouseup=null；
document.onmousemove=null；
}
}

#mydiv，
#mydiv2{
位置：绝对位置；
z指数：9；
背景色：#f1f1；
文本对齐：居中；
边框：1px实心#D3；
}
#mydivheader，
#mydivheader2{
填充：10px；
光标：移动；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}

单击此处移动
移动

这个

DIV

单击此处移动
移动

这个

DIV

原始示例 您可以使用链接示例中提到的

position:absolute

，但不定义

top

、

left

等。对于绝对定位的元素，它们都具有相同的默认值：

top:0

和

left:0

。因此，它们都出现在同一个位置，从而导致相互叠加

如果为每个绝对定位元素的

top

、

left

等定义不同的值，则可以防止堆叠。例如：

#mydiv2 {
  top: 170px;
}

这是一个针对您最初发布的问题的解决方案，其中包含两个硬编码的可拖动元素，但不适合动态添加内容

工作示例：

为了简单起见，如果。。。else在函数

dragElement（）

中阻塞，并将事件侦听器直接附加到整个元素：

elmnt.onmousedown = dragMouseDown;

//使DIV元素成为draggagle：
DrageElement（document.getElementById（“mydiv2”）；
DrageElement（document.getElementById（“mydiv”）；
功能牵引装置（elmnt）{
变量pos1=0，pos2=0，pos3=0，pos4=0；
elmnt.onmousedown=dragMouseDown；
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
//计算新光标位置：
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”；
}
函数closeDrageElement（）{
//释放鼠标按钮时停止移动：
document.onmouseup=null；
document.onmousemove=null；
}
}

#mydiv，
#mydiv2{
位置：绝对位置；
z指数：9；
背景色：#f1f1；
文本对齐：居中；
光标：移动；
边框：1px实心#D3；
}
#mydiv2{
顶部：170px；
}
#mydivheader，
#mydivheader2{
填充：10px；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}

单击此处移动
移动

这个

DIV

单击此处移动
移动

这个

DIV

这些元素显示在彼此的顶部，因为您的

#mydiv

已声明

位置：绝对

，这会将其从文档流中删除。根据CSS的规定，流出的元素将被放置在流动元素的顶部

建议使用CSS函数进行移动，而不是使用

position:absolute

和

top

等。这将使元素留在流中，这意味着仍将考虑它们

由于

translate（）

将在重新流动（重新验证文档流动）后生效，因此即使移动可拖动的元素，也不会影响布局

如果您只对结果感兴趣，请跳过。但这里有更多的信息

W3Schools（是吗？）因为有些过时，有时甚至有不好的建议而臭名昭著，所以我建议在阅读他们的文章的基础上做一些研究

现在，-函数非常适合向后兼容，因为它是为2011年及更早版本的浏览器编写的。如今，大多数（如果不是全部的话）浏览器实现HTML5、CSS3和（至少）ES6（JavaScript规范），以及某些浏览器标准

这意味着，以下（以及更多！

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;}
      //you can set here height and width: in my case 300 was the width of the container, 35 was the width of markers
      else{
        left=5;
        top=top+70;//70 height of marker
      }
    }

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';// 'col-md-3 col-lg-3 col-xl-3 col-sm-6';//'mydiv';

  var mydivmarker= document.createElement("div");
  mydivmarker.id=module_name+"header";
  mydivmarker.className ='mydivheader';// 'col-sm-4';//'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);

  // var p = document.createElement("p");
  mydiv.innerHTML=module_name;
  // mydiv.append(p);
  mydiv.append(mydivmarker);

  ///***
  // mydiv.style.cssFloat = "left";
  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);
  
  
}

function dragElement(elmnt) {
  
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(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;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

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