Javascript 将所有子项移动到 div 元素内

Question

我正在尝试创建一个简单的拖动函数，根据鼠标移动将所有子项移动到 div 标签内，在简单的世界中，我计算 deltaX 和 deltaY 并将它们应用于 [=] 内的所有子项25=] 通过更改 style.top 和 style.left。至于 X 坐标，它运作良好，而 Y 不起作用（仅增加），我无法解释原因。这就是我所做的

//Make the DIV element draggagle:
dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var deltaX = 0, deltaY = 0, initX = 0, initY = 0;
  var flag=true;
  elmnt.onmousedown = dragMouseDown;


  var childrens;
  function dragMouseDown(e) {
    e = e || window.event;
    //console.log("dragMouseDown: "+e.clientX+" "+e.clientY);
    
    childrens = document.getElementById("mydiv").querySelectorAll(".child");
    
    // get the mouse cursor position at startup:
    initX = e.clientX;
    initY = e.clientY;
    document.onmouseup = closeDragElement;
 
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {

    if(flag){
  flag=false;
  
  e = e || window.event;
   
  // calculate the new cursor position:
  deltaX = e.clientX-initX;
  deltaY = e.clientY-initY;

  console.log("deltaX: "+deltaX+" deltaY: "+deltaY);
  
  
  for (var i = 0; i < childrens.length; i++) {
  
   //console.log("childrens[i].offsetTop: "+childrens[i].offsetTop+" childrens[i].offsetLeft: "+childrens[i].offsetLeft);
   childrens[i].style.top = (childrens[i].offsetTop + deltaY) + "px"; // dont work (only increase)
   childrens[i].style.left = (childrens[i].offsetLeft + deltaX) + "px";
  }
  
  initX = e.clientX;
  initY = e.clientY;
  deltaX=0;
  deltaY=0;
  
  flag=true;
 }

  }

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

#mydiv {
    position: fixed;
    z-index: 9;
    background-color: #f1f1f1;
    text-align: center;
 width:400px;
 height:400px;
    border: 1px solid #d3d3d3;
}

.child {
 position: relative;
    padding: 10px;
    cursor: move;
    z-index: 10;
    background-color: #2196F3;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Draggable DIV Element</h1>

<p>Click and hold the mouse button down while moving the DIV element</p>

<div id="mydiv" style="background-color:blue">
  <p class="child" style="background-color:red">Move 1</p>
</div>

Answer 1

尝试这样的事情：

dragElement(document.getElementById(("mydiv")));

function dragElement(elmnt) {
  var deltaX = 0,
    deltaY = 0,
    initX = 0,
    initY = 0;
  var flag = true;
  elmnt.onmousedown = dragMouseDown;

  var childrens;


  function dragMouseDown(e) {
    e = e || window.event;
    childrens = document.getElementById("mydiv").querySelectorAll(".child");

    for (var i = 0; i < childrens.length; i++) {
      childrens[i].style.top = childrens[i].style.top == "" ? "0px" : childrens[i].style.top;
      childrens[i].style.left = childrens[i].style.left == "" ? "0px" : childrens[i].style.left;
    }

    initX = e.clientX;
    initY = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    if (flag) {
      flag = false;

      e = e || window.event;

      deltaX = e.clientX - initX;
      deltaY = e.clientY - initY;

      for (var i = 0; i < childrens.length; i++) {
        childrens[i].style.top = parseInt(childrens[i].style.top) + deltaY + "px";
        childrens[i].style.left = parseInt(childrens[i].style.left) + deltaX + "px";
      }

      initX = e.clientX;
      initY = e.clientY;

      flag = true;
    }
  }

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

#mydiv {
  position: fixed;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  width: 400px;
  height: 400px;
  border: 1px solid #d3d3d3;
}

.child {
  position: relative;
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}

<h1>Draggable DIV Element</h1>

<p>Click and hold the mouse button down while moving the DIV element</p>

<div id="mydiv" style="background-color:blue">
  <p class="child" style="background-color:red">Move 1</p>
  <p class="child" style="background-color:yellow">Move 2</p>
</div>

这不是一个很好的解决方案，但它确实有效。考虑使用 jQuery 和 jQuery Draggable.

Javascript 将所有子项移动到 div 元素内

Javascript move all childs inside div element

html

javascript

jquery

draggable