拖动一个HTML框并使用JavaScript使另一个框跟随它

我正在尝试创建类似于将一个box Hello World拖到任何位置的东西，第二个box Follow World将缓慢跟随

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

函数起始范围{ //确定事件对象 如果{ var e=window.event； } //IE使用src元素，其他使用target var targ=e.target？e.target:e.src元素； 如果target.className！=“dragme”{ 回来 }; //计算事件X，Y坐标 offsetX=e.clientX； offsetY=e.clientY； //为顶部和左侧属性指定默认值 如果！目标样式左{ target.style.left='0px' }; 如果！targ.style.top{ target.style.top='0px' }; //计算顶部和左侧的整数值 //性质 coordX=parseInttarg.style.left； coordY=parseInttarg.style.top； 阻力=真； //移动div元素 document.onmousemove=dragDiv； 返回false； } 函数驱动{ 如果！拖{ 回来 }; 如果{ var e=window.event }; var targ=e.target？e.target:e.src元素； //移动div元素 target.style.left=coordX+e.clientX-offsetX+'px'； target.style.top=coordY+e.clientY-offsetY+px'； 返回false； } 功能阻力{ 定时器； 阻力=假； } window.onload=函数{ document.onmousedown=startDrag； document.onmouseup=停止拖动； } 函数显示{ var阶跃=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； 如果y

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);
}

---

在下面的代码片段中，粉色框是可拖动的，蓝色框紧随其后。可以更改像素秒以调整移动速度

功能消息{ document.getElementById'messageContainer'.innerHTML=s； } window.onload=函数{ var pixelsPerSecond=80， drag=document.getElementById'drag'， follow=document.getElementById'follow'， wrapper=document.getElementById'wrapper'， messageContainer=document.getElementById'messageContainer'， leftMax， topMax； 函数设置边界{ leftMax=wrapper.offsetWidth-拖动.offsetWidth； topMax=wrapper.offsetHeight-拖动.offsetHeight； drag.style.left=Math.mindrag.offsetLeft，leftMax+'px'； drag.style.top=Math.mindrag.offsetTop，topMax+'px'； } 挫折； window.onresize=设置边界； [drag，follow，messageContainer].forEachfunction元素{ element.className+=“不可选择”； element.ondragstart=element.onselectstart=函数事件{ 违约事件； }; }; var start=Date.now； drag.onmousedown=函数事件{ event=event | | window.event； var x0=event.pageX | | event.clientX， y0=event.pageY | | event.clientY， left0=drag.offsetLeft， top0=拖动。偏移设置； window.onmousemove=函数事件{ var x=event.pageX | | event.clientX， y=event.pageY | | event.clientY； drag.style.left=Math.max0，Math.minleft0+x-x0，leftMax+'px'； drag.style.top=Math.max0，Math.mintop0+y-y0，topMax+'px'； }; window.onmouseup=函数{ window.onmousemove=window.onmouseup=undefined； }; }; follow.x=follow.offsetLeft； follow.y=follow.offsetTop； 功能更新{ var EXPASTED=Date.now-开始； 如果经过===0{ window.requestAnimationFrameupdate； 回来 } var x1=拖动。偏移左侧，

---

y1=drag.offsetTop+drag.offsetTop+drag.offsetTop你看到我的答案了吗？如果你认为我的答案更好，你可以接受我的答案。follow world跟踪新开发人员说Hello world吗？我的代码片段是受名为it Follows的电影启发的。观看它，你会明白一切。