使用JavaScript移动页面上的按钮

我的按钮可以移动，但奇怪的是，我不知道是不是偏移量出了问题

我想让我的按钮随着鼠标光标移动，但现在它的移动方式不是我想要的，有时它会消失

此外，新创建的按钮是重叠的，我不知道如何解决这个问题，并有一个更好的外观

var-coorA；
var-coorB；
var btn=null；
函数mousedown（）{
如果（event.target.tagName==“按钮”）{
btn=事件。目标；
库拉=btn.offsetTop；
coorB=btn.offsetLeft；
}
}
函数mouseup（）{
btn=null；
}
函数mousemove（）{
如果（btn！==null）{
btn.style.top=（event.clientY-coorA）+“px”；
btn.style.left=（event.clientX-coorB）+“px”；
}
}
函数createButton（）{
var button=document.createElement（“按钮”）；
var msg=document.getElementById（“word”）.value；
如果（msg.length>0）{
var t=document.createTextNode（msg）；
按钮。追加子项（t）；
document.body.appendChild（按钮）；
}
document.getElementById（“word”）.value=“”；
}
document.getElementsByTagName（“body”）[0]。addEventListener（“mousedown”，mousedown）；
document.getElementsByTagName（“正文”）[0]。addEventListener（“mousemove”，mousemove）；
document.getElementsByTagName（“body”）[0]。addEventListener（“mouseup”，mouseup）
正文{
背景色：黑色；
}
#话{
填充：10px 30px；
字体大小：14px；
}
钮扣{
位置：绝对位置；
背景色：#e7e7e7；
颜色：#000；
字号：700；
填充：10px 30px；
字体大小：14px；
边框：1px纯色灰色；
}
#加{
位置：相对位置；
背景色：#e7e7e7；
颜色：#000；
字号：700；
填充：10px 30px；
字体大小：14px；
}

诗歌-yuc217


这
在这里输入代码
要修复重叠，请创建一个未排序的列表，然后将
字段值添加到未排序的列表中

<ul id="buttonList">
     <li><button type="button" >this</button></li>
     <li><button type="button" >that</button></li>
     <li><button type="button" >the other</button></li>
</ul>


这个
那
另一个


至于我无法复制的移动按钮，它们有一些延迟，但对我来说它们移动得很好，如果您需要额外的帮助，您可以使用JSFIDLE准备一个演示。
在评论中回答您的问题：

非常感谢！我仍然不太清楚到底是什么“事件”
指。据我所知，事件是页面上的所有动作。
这还不太清楚

在代码中引用了
事件
对象，但没有将其作为参数传递。我相信你的困惑可能源于此。嗯，我自己也是个古玩，哦，天哪，我从兔子洞里钻了进去

我会尽量做到简单和笼统，因为我自己已经完全理解了这一点

好的，所以浏览器中有不同类型的事件。您可能知道一些标准的事件，如“单击”、“onload”、“keydown”等。如果您希望代码在此类事件发生时执行某些操作，您可以选择一个DOM元素，例如
，
等（一般来说，因为也有与DOM无关的事件，您可以在此处阅读所有相关内容）。然后将此元素附加到将在触发所述事件时调用的函数

附加这样的函数有不同的方法（顺便说一句，也称为事件处理程序或事件侦听器）。附加事件处理程序时，将实现称为EventListener接口的东西。通过事件触发的函数将获得一个参数，一个事件对象，由接口（）提供

但是！！！如果使用内联方法附加事件，即

我不确定为什么会发生这种情况，但这是一个很好的新问题

另外，关于你的代码和主要问题（我只提供了代码，没有解释）——它在不同的方面存在问题（内联事件附加，通过ex的标记名选择元素），我专注于解决你的问题，对你的代码/样式做最小的更改，但请注意


var-coorA；
var-coorB；
var btn=null；
var lastMouseX；
var lastMouseY；
函数mousedown（）{
if（event.target.className.indexOf（“listButton”）>-1）{
btn=事件。目标；
如果（btn.style.top==“”| | btn.style.left==“”）{
btn.style.position=“绝对”；
btn.style.top=btn.offsetTop+“px”；
btn.style.left=btn.offsetLeft+“px”；
}
库拉=btn.offsetTop；
coorB=btn.offsetLeft；
}
}
函数mouseup（）{
btn=null；
}
函数mousemove（）{
如果（btn！==null）{
btn.style.top=parseInt（btn.style.top）+（event.clientY-lastMouseY）+“px”；
btn.style.left=parseInt（btn.style.left）+（event.clientX-lastMouseX）+“px”；
}
lastMouseX=event.clientX；
lastMouseY=event.clientY；
}
函数createButton（）{
var button=document.createElement（“按钮”）；
var msg=document.getElementById（“word”）.value；
如果（msg.length>0）{
var t=document.createTextNode（msg）；
按钮。追加子项（t）；
button.classList.add（“listButton”）；
document.getElementsByClassName（“容器”）[0].appendChild（按钮）；
}
document.getElementById（“word”）.value=“”；
}
document.getElementsByTagName（“body”）[0]。addEventListener（“mousedown”，mousedown）；
document.getElementsByTagName（“正文”）[0]。addEventListener（“mousemove”，mousemove）；
document.getElementsByTagName（“body”）[0]。addEventListener（“mouseup”，mouseup）；
document.getElementById（“add”）.addEventListener（“单击”，创建按钮）；
正文{
背景色：黑色；
}
.集装箱{
po