How to drag multiple div elements using JAVASCRIPT only (not by jquery)?

问题

I have written this code to clone and drag the divs on mouse move but somehow I am unable to achieve . Can anyone let me know what I am missing here. I have created 3 divs which can be dynamic and I am using ctrl+left click to select the elements and when I started to drag my mouse , I am clonning the element and then trying to move the clonned elements. Also , I have created the boundary condition where I am modifying the color of the boundary of the div.

But I am not able to move the clonned divs with my mouse.

Here is my code :

//Make the DIV element draggagle:
var divElement1 = document.getElementById("mydiv1");
var divElement2 = document.getElementById("mydiv2");
var divElement3 = document.getElementById("mydiv3");
//dragElement(document.getElementById("mydiv"));
//dragElement(document.getElementById("mydiv1"));
dragElement(divElement1);
dragElement(divElement2);
dragElement(divElement3);
divsArray = [];
divsArray.push(divElement1);
divsArray.push(divElement2);
divsArray.push(divElement3);


clickedElement = null;
collidedElement = null;
isClonned = false;
clonnedElement = null;
multipleSelectedElements = [];
previousLeft = 0;
previousTop = 0;
isPrevious = false;

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;
    offset = [
      elmnt.offsetLeft - e.clientX,
      elmnt.offsetTop - e.clientY
    ]


  }

  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;

    collidedElement = null;
    var conatiner = document.getElementById("container");
    let x = event.clientX + offset[0];
    let y = event.clientY + offset[1];
    // set the element's new position:


    for (let element of multipleSelectedElements) {
      if (!element.isClonned) {
        createClone(element);
        element.isClonned = true;

        let container = document.getElementById("container");
        container.append(clonnedElement);
        clonnedElement.style.position = "absolute";
      }
      console.log("pos1 " + element.element.offsetLeft);
      console.log("pos2 " + element.element.offsetTop);

    }

    if (!isPrevious) {
      isPrevious = true;
      previousLeft = elmnt.getBoundingClientRect().left;
      previousTop = elmnt.getBoundingClientRect().top;
    }

    var offsetLeft = pos1 - previousLeft;
    var offsetTop = pos2 - previousTop;

    let cloDivArr = document.getElementsByClassName("draggable");
    // set the element's new position:
    for (var m = 0; m < cloDivArr.length; m++) {
      console.log("offsetLeft " + offsetLeft);
      console.log("offsetTop " + offsetTop);
      let cloneDiv = cloDivArr[m].getBoundingClientRect();

      cloDivArr[m].style.top = cloneDiv.top + offsetTop + "px";
      cloDivArr[m].style.left = cloneDiv.left + "px";

      previousLeft = cloDivArr[m].getBoundingClientRect().left;
      previousTop = cloDivArr[m].getBoundingClientRect().top;
      console.log("cloDivArr[m].style.top :" + cloDivArr[m].style.top);
      console.log("cloDivArr[m].style.left :" + cloDivArr[m].style.left);
    }


  }

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

    if (collidedElement != null && !collidedElement.contains(clickedElement)) {
      clickedElement.style.position = "absolute";
      clickedElement.style.left = '0px';
      clickedElement.style.top = '0px';
      collidedElement.style.position = "absolute";
      collidedElement.appendChild(clickedElement);
    }
    //isClonned = true;

  }

  function createClone(ele) {
    clonnedElement = ele.element.cloneNode(true);
    //clonnedElement.id="clonnedEle";
    clonnedElement.classList.add("draggable");
  }

}


function selectMultiple(event) {
  if (event.ctrlKey) {
    this.multipleSelectedElements.push({
      "element": event.target.parentElement,
      "isClonned": false
    });

  } else {
    for (let element of this.multipleSelectedElements) {
      element.element.style.border = "1px solid #d3d3d3";
    }
    this.multipleSelectedElements = [];

  }

  if (this.multipleSelectedElements.length == 0) {
    this.multipleSelectedElements.push({
      "element": event.target.parentElement,
      "isClonned": false
    });
  }
  for (let element of this.multipleSelectedElements) {
    element.element.style.border = "1px solid #ff0000";
  }
  console.log("this.multipleSelectedElements size :" + this.multipleSelectedElements.length);

}

#mydiv1,
#mydiv2,
#mydiv3 {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  border-color: gray;
  width: 150px;
}

#mydiv1header,
#mydiv2header,
#mydiv3header {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<!DOCTYPE html>
<html>

<body>

  <h1>Draggable DIV Element</h1>

  <p>Click and hold the mouse button down while moving the DIV element</p>
  <div id="container" style="    position: absolute;
    height: 81%;
    width: 99%;">
    <div id="mydiv1" class="dragable A" onclick="selectMultiple(event);">
      <div id="mydiv1header">DIV 1</div>
      <p>Move 1</p>
      <p>this 1</p>
      <p>DIV 1</p>
    </div>


    <div id="mydiv2" class="dragable B" style="left:350px" onclick="selectMultiple(event);">
      <div id="mydiv2header">DIV 2</div>
      <p>Move 2</p>
      <p>this 2</p>
      <p>DIV 2</p>
    </div>

    <div id="mydiv3" class="dragable C" style="left:650px" onclick="selectMultiple(event);">
      <div id="mydiv3header">DIV 3</div>
      <p>Move 3</p>
      <p>this 3</p>
      <p>DIV 3</p>
    </div>

  </div>
</body>

</html>

来源：https://stackoverflow.com/questions/59715212/how-to-drag-multiple-div-elements-using-javascript-only-not-by-jquery