使用JavaScript移动页面上的按钮
Move buttons on a page using JavaScript
我的按钮可以移动，但奇怪的是，我不知道偏移量是否有问题。
我希望我的按钮能随着我的鼠标光标移动，但现在它没有以我想要的方式移动，有时它会消失。
此外，创建的新按钮是重叠的，我不知道如何解决这个问题，并有一个更好的外观。
var coorA;
var coorB;
var btn = null;
function mousedown() {
if (event.target.tagName === "BUTTON") {
btn = event.target;
coorA = btn.offsetTop;
coorB = btn.offsetLeft;
}
}
function mouseup() {
btn = null;
}
function mousemove() {
if (btn !== null) {
btn.style.top = (event.clientY - coorA) + "px";
btn.style.left = (event.clientX - coorB) + "px";
}
}
function createButton() {
var button = document.createElement("BUTTON");
var msg = document.getElementById("word").value;
if (msg.length > 0) {
var t = document.createTextNode(msg);
button.appendChild(t);
document.body.appendChild(button);
}
document.getElementById("word").value = "";
}
document.getElementsByTagName("body")[0].addEventListener("mousedown", mousedown);
document.getElementsByTagName("body")[0].addEventListener("mousemove", mousemove);
document.getElementsByTagName("body")[0].addEventListener("mouseup", mouseup);body {
background-color: black;
}
#word {
padding: 10px 30px;
font-size: 14px;
}
button {
position: absolute;
background-color: #e7e7e7;
color: #000;
font-weight: 700;
padding: 10px 30px;
font-size: 14px;
border: 1px solid gray;
}
#add {
position: relative;
background-color: #e7e7e7;
color: #000;
font-weight: 700;
padding: 10px 30px;
font-size: 14px;
}<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Poetry-yuc217</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<form>
<input id = "word" type = "text" name = "word">
<input id = "add" type = "button" value = "Add Word" onclick = "createButton()">
<br>
</form>
<button type="button" >this</button>
</div>
enter code here
</body>
</html>在评论中回答您的问题：
非常感谢！我仍然有点困惑到底是什么"事件"根据我所了解到的，event就是页面上的所有动作。这还不太清楚。。。
在您的代码中，您已经引用了event对象，但尚未将其作为参数传递。我相信你的困惑可能源于此。嗯，我自己也是古玩，哦，天哪，我去了兔子洞。。。
我会尽量简单&尽管我能做到一般，因为我自己还没有完全理解这一点。
好的，所以浏览器中有不同类型的事件。您可能知道一些标准的元素，如"click"、"onload"、"keydown"等。如果您希望代码在此类事件发生时执行某些操作，您可以选择一个DOM元素，如<button>、<div>等（一般来说，因为也有与DOM无关的事件，您可以在此处阅读有关它的全部内容https://developer.mozilla.org/en-US/docs/Web/Events)。然后将此元素附加到一个函数，该函数将在触发所述事件时调用。
有不同的方法可以附加这样的函数（BTW也称为事件处理程序或活动侦听器）。在附加事件处理程序时，正在实现名为EventListener接口的东西。通过事件触发的函数将通过接口获得一个参数，一个event对象(https://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#glossary-事件处理程序）。
但是！！！如果使用内联方法（即<a onclick="myFunc();" />）附加事件，则只有在函数内部写入"event"（即<a onclick="myFunc(event);" />）时，函数才会接收参数（event）。
您可以在这个JSFiddle:中观察到这种奇怪的行为和附加的不同类型的事件
https://jsfiddle.net/duwed8kg/
我不确定为什么会发生这种情况，但对于新问题来说，这是一个非常好的主题。
p.S，关于你的代码和主要问题（我只提供了代码，没有解释）——它在不同方面都有问题（内联事件附加，通过标签名称选择元素），我专注于解决你的问题，对你的代码/风格的更改最小，但请注意
var coorA;
var coorB;
var btn = null;
var lastMouseX;
var lastMouseY;
function mousedown() {
if (event.target.className.indexOf("listButton") > -1) {
btn = event.target;
if(btn.style.top === "" || btn.style.left === "") {
btn.style.position = "absolute";
btn.style.top = btn.offsetTop + "px";
btn.style.left = btn.offsetLeft + "px";
}
coorA = btn.offsetTop;
coorB = btn.offsetLeft;
}
}
function mouseup() {
btn = null;
}
function mousemove() {
if (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;
}
function createButton() {
var button = document.createElement("BUTTON");
var msg = document.getElementById("word").value;
if (msg.length > 0) {
var t = document.createTextNode(msg);
button.appendChild(t);
button.classList.add("listButton");
document.getElementsByClassName("container")[0].appendChild(button);
}
document.getElementById("word").value = "";
}
document.getElementsByTagName("body")[0].addEventListener("mousedown", mousedown);
document.getElementsByTagName("body")[0].addEventListener("mousemove", mousemove);
document.getElementsByTagName("body")[0].addEventListener("mouseup", mouseup);
document.getElementById("add").addEventListener("click", createButton);body {
background-color: black;
}
.container {
position:relative;
height:1000px;
}
#word {
padding: 10px 30px;
font-size: 14px;
}
button {
background-color: #e7e7e7;
color: #000;
font-weight: 700;
padding: 10px 30px;
font-size: 14px;
border: 1px solid gray;
}
.listButton {
margin-right: 5px;
margin-top: 5px;
float: left;
}
#add {
position: relative;
background-color: #e7e7e7;
color: #000;
font-weight: 700;
padding: 10px 30px;
font-size: 14px;
}<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Poetry-yuc217</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<form>
<input id = "word" type = "text" name = "word">
<input id = "add" type = "button" value = "Add Word">
<br>
</form>
<button type="button" class="listButton">this</button>
</div>
enter code here
</body>
</html>要修复重叠，请创建一个未排序列表，然后将<li><button type="button" >fieldValue</button></li>附加到未排序列表中。
<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>
至于我无法复制的移动按钮，它们有一些滞后，但它们对我来说移动得很好，也许如果你需要额外的帮助，你可以使用jsfiddle准备一个演示。
相关文章：
- 复制当前url按钮-Javascript
- 通过提示中的循环触发iFrame中的输入按钮(JavaScript）
- 在单击按钮时激活按钮的悬停状态，直到单击另一个按钮(Javascript/JQuery）
- 从导航按钮 JavaScript 中删除动画
- IE8中的FB共享按钮Javascript错误
- 表单验证上的彩色单选按钮-Javascript
- 通过一个按钮JAVASCRIPT更改style.display在多个对象上的显示
- 变暗图像滑块/按钮 - Javascript
- 下载pdf/word按钮javascript /jquery
- 带有单选按钮 JavaScript 的随机测验
- C# Web 浏览器 - 如何单击此按钮 (Javascript）
- 获取按钮 Javascript 的宽度，不带“px”
- 自动点击提交按钮 javascript
- 保存和关闭按钮 javascript
- 使用按钮 javascript 在 forloop 中创建 Cookie
- 搜索下一个按钮 javascript
- 保存状态单选按钮javascript html
- 使用类型按钮javascript提交表单
- 点击提交按钮Javascript HTML后显示表格数据
- 使用%用单按钮JavaScript函数交换图像
