拖拽一个HTML框，然后用JavaScript创建另一个框

Drag an HTML box and make another box follow it with JavaScript

本文关键字：然后 JavaScript 另一个创建 HTML 一个更新时间：2023-09-26

我正在尝试创建一些东西，比如拖动一个框(Hello World)到任何位置，第二个框(Follow World)将慢慢跟随。

在下面的代码中，拖动框是可以的，但是跟随框不能正确跟随。而且，拖放框不能放。

function startDrag(e) {
  // determine event object
  if (!e) {
    var e = window.event;
  }
  // IE uses srcElement, others use target
  var targ = e.target ? e.target : e.srcElement;
  if (targ.className != 'dragme') {
    return
  };
  // calculate event X, Y coordinates
  offsetX = e.clientX;
  offsetY = e.clientY;
  // assign default values for top and left properties
  if (!targ.style.left) {
    targ.style.left = '0px'
  };
  if (!targ.style.top) {
    targ.style.top = '0px'
  };
  // calculate integer values for top and left 
  // properties
  coordX = parseInt(targ.style.left);
  coordY = parseInt(targ.style.top);
  drag = true;
  // move div element
  document.onmousemove = dragDiv;
  return false;
}
function dragDiv(e) {
  if (!drag) {
    return
  };
  if (!e) {
    var e = window.event
  };
  var targ = e.target ? e.target : e.srcElement;
  // move div element
  targ.style.left = coordX + e.clientX - offsetX + 'px';
  targ.style.top = coordY + e.clientY - offsetY + 'px';
  return false;
}
function stopDrag() {
  timer();
  drag = false;
}
window.onload = function() {
  document.onmousedown = startDrag;
  document.onmouseup = stopDrag;
}
function disp() {
  var step = 1;
  var y = document.getElementById('followme').offsetTop;
  var x = document.getElementById('followme').offsetLeft;
  var ty = document.getElementById('draggable').offsetTop;
  var ty = document.getElementById('draggable').offsetLeft;
  if (y < ty) {
    y = y + step;
    document.getElementById('followme').style.top = y + "px"; // vertical movment
  } else {
    if (x < tx) {
      x = x + step;
      document.getElementById('followme').style.left = x + "px"; // horizontal movment
    }
  }
}
function timer() {
  disp();
  var y = document.getElementById('followme').offsetTop;
  var x = document.getElementById('followme').offsetLeft;
  document.getElementById("msg").innerHTML = "X: " + tx + " Y : " + ty
  my_time = setTimeout('timer()', 10);
}

.dragme {
  position: relative;
  width: 60px;
  height: 80px;
  cursor: move;
}
.followme {
  position: relative;
  width: 60px;
  height: 80px;
}
#draggable {
  background-color: #ccc;
  border: 1px solid #000;
}
#followme {
  background-color: #ccc;
  border: 1px solid #000;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Drag and drop</title>
</head>
<body>
  <div id='msg'></div>
  <div id="draggable" class="dragme">"Hello World!"</div>
  <div id="followme" class="followme">"Follow World!"</div>

修改您的disp和timer函数:

function disp()
{
    var step = 1;
    // in dragDiv() you modifying style.left/style.top properties, not offsetTop/offsetLeft
    var x = parseInt(document.getElementById('followme').style.left) || 0;
    var y = parseInt(document.getElementById('followme').style.top) || 0;
    var tx = parseInt(document.getElementById('draggable').style.left) || 0;
    var ty = parseInt(document.getElementById('draggable').style.top) || 0;
    // properly calculate offset
    var dx = ((dx = tx - x) == 0) ? 0 : Math.abs(dx) / dx;
    var dy = ((dy = ty - y) == 0) ? 0 : Math.abs(dy) / dy;
    document.getElementById('followme').style.left = (x + dx * step) + "px"; // horisontal movment
    document.getElementById('followme').style.top  = (y + dy * step) + "px"; // vertical movment
}
function timer()
{
    disp();
    var y=document.getElementById('followme').offsetTop;
    var x=document.getElementById('followme').offsetLeft;
    document.getElementById("msg").innerHTML="X: " + x + " Y : " + y; // typo was here
    my_time = setTimeout(function () {
      clearTimeout(my_time); // need to clear timeout or it'll be adding each time 'Hello world' clicked
      timer();
    },10);
}

在下面的代码片段中，粉色框是可拖拽的，蓝色框紧随其后。你可以改变pixelsPerSecond来调整移动的速度。

function message(s) {
  document.getElementById('messageContainer').innerHTML = s;
}
window.onload = function () {
  var pixelsPerSecond = 80,
      drag = document.getElementById('drag'),
      follow = document.getElementById('follow'),
      wrapper = document.getElementById('wrapper'),
      messageContainer = document.getElementById('messageContainer'),
      leftMax,
      topMax;
  function setBoundaries() {
    leftMax = wrapper.offsetWidth - drag.offsetWidth;
    topMax = wrapper.offsetHeight - drag.offsetHeight;
    drag.style.left = Math.min(drag.offsetLeft, leftMax) + 'px';
    drag.style.top = Math.min(drag.offsetTop, topMax) + 'px';
  }
  setBoundaries();
  window.onresize = setBoundaries;
  [drag, follow, messageContainer].forEach(function (element) {
    element.className += ' unselectable';
    element.ondragstart = element.onselectstart = function (event) {
      event.preventDefault();
    };
  });
  var start = Date.now();
  drag.onmousedown = function (event) {
    event = event || window.event;
    var x0 = event.pageX || event.clientX,
        y0 = event.pageY || event.clientY,
        left0 = drag.offsetLeft,
        top0 = drag.offsetTop;
    window.onmousemove = function (event) {
      var x = event.pageX || event.clientX,
          y = event.pageY || event.clientY;
      drag.style.left = Math.max(0, Math.min(left0 + x - x0, leftMax)) + 'px';
      drag.style.top = Math.max(0, Math.min(top0 + y - y0, topMax)) + 'px';
    };
    window.onmouseup = function () {
      window.onmousemove = window.onmouseup = undefined;
    };
  };
  follow.x = follow.offsetLeft;
  follow.y = follow.offsetTop;
  function update() {
    var elapsed = Date.now() - start;
    if (elapsed === 0) {
      window.requestAnimationFrame(update);
      return;
    }
    var x1 = drag.offsetLeft,
        y1 = drag.offsetTop + (drag.offsetTop + drag.offsetHeight <= topMax ?
              drag.offsetHeight : -drag.offsetHeight),
        x0 = follow.x,
        y0 = follow.y,
        dx = x1 - x0,
        dy = y1 - y0,
        distance = Math.sqrt(dx*dx + dy*dy),
        angle = Math.atan2(dy, dx),
        dd = Math.min(distance, pixelsPerSecond * elapsed / 1000);
    message('x: ' + x1 + ', y: ' + y1);
    follow.x += Math.cos(angle) * dd;
    follow.style.left = follow.x + 'px';
    follow.y += Math.sin(angle) * dd;
    follow.style.top = follow.y + 'px';
    start = Date.now();
    window.requestAnimationFrame(update);
  }
  window.requestAnimationFrame(update);
};

#wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #eee;
  font-family: sans-serif;
  text-align: center;
}
.unselectable {
  -webkit-user-select: none;
  -khtml-user-drag: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}
#messageContainer {
  position: absolute;
  left: 80px;
  top: 50px;
  font-size: 36px;
  color: #aaa;
  cursor: default;
}
.box {
  position: absolute;
  width: 60px;
  height: 80px;
}
.label {
  margin: 30px auto;
  font-size: 14px;
}
#drag {
  left: 100px;
  top: 120px;
  background: #f0dddb;
  border: 2px solid #deb7bb;
  cursor: move;
}
#follow {
  left: 0;
  top: 0;
  background-color: #ddebf3;
  border: 2px solid #bfd5e1;
  cursor: default;
}

<div id="wrapper">
<div id="messageContainer"></div>
<div class="box" id="follow"> <div class="label">it follows</div> </div>
<div class="box" id="drag"> <div class="label">drag me</div> </div>