【发布时间】：2018-08-05 17:08:25
【问题描述】：
我一直在从事一个项目，但遇到了一个问题。 我正在尝试制作多个在拖动时沿 y 轴移动的上下滑块。 我从一个可拖动元素 (https://www.w3schools.com/howto/howto_js_draggable.asp) 的 W3Schools 代码基础开始，然后从那里构建它。 但是，e.clientY 的某些东西不起作用。在测试时，我发现它没有改变它的值。 如果有人有任何想法，他们将不胜感激。谢谢！ 附：对不起所有的测试代码，我还没有清理它。一些 cmets 和函数与程序并不真正相关。
HTML： 一个
</div>
</div>
<button id="Button">
Click Here
</button>
<div id="Error">
TEXT
</div>
JS：
var b = document.getElementById("Button");
var area = document.getElementById("AddGraphsHere");
var etwo;
var count = 0;
var error = document.getElementById("Error");
var point = 1;
var interval;
var elmnt;
var canExecute;
b.onclick = function addDiv() {
area.innerHTML += "<div id='Graph'><div onmouseover='dragElement(this, event)' id='Point'></div></div>";
point = document.getElementById('Point');
}
function falert() {alert("Hello!"); this.onmousedown = dragMouseDown;}
//Start with a dragElement(Graph);
function dragElement(elmnt, e) {
var pos1 = 0, pos2 = 0;
/* if present, the header is where you move the DIV from:*/
//error.innerHTML = elmnt;
document.addEventListener("mousedown", function () {dragMouseDown();});
function dragMouseDown(e) {
//error.innerHTML = "dragMouseDown Activated!";
e = e || window.event;
//alert(e);
// get the mouse cursor position at startup:
pos2 = e.clientY;
canExecute = true;
error.innerHTML = "a";
// call a function whenever the cursor moves:
document.addEventListener("mousemove", function () {elementDrag(e);});
//document.onmouseup = closeDragElement();
}
function elementDrag(e) {
if (canExecute === true) {
e = e || window.event;
count = count + 1;
// calculate the new cursor position:
pos2 = e.clientY;
pos1 = pos2 - e.clientY;
pos2 = e.clientY;
// set the element's new position:
elmnt.style.position = "absolute";
elmnt.style.top = (elmnt.offsetTop - pos1) + "px";
//elmnt.top = (elmnt.offsetTop -
//pos1) + "px";
error.innerHTML = pos1 + ", " + count;
console.log(count + ", " + pos2);
//error.innerHTML = elmnt.offsetTop + " - " + pos1;
document.addEventListener("mouseup", function() {closeDragElement();});
}
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
error.innerHTML = "Cleared!";
canExecute = false;
}
}
CSS：
#Border {
border: #000000 5px solid;
width: 90%;
height: 200px;
}
#Graph {
width: 18%;
height: 190px;
float: left;
border: 1px solid black;
padding: 5px;
font-family: sans-serif;
font-size: 12px;
}
#Point {
width: 8px;
height: 8px;
border-radius: 100%;
border: 3px solid #0000FF;
background-color: #AAAAFF;
top: 100px;
position: absolute;
cursor: move;
}
（抱歉没有把它作为代码sn-p，但是我测试过它并没有像以前那样工作。）
【问题讨论】：
-
没有阅读所有内容（或者说实话几乎没有阅读），但
document.onmousedown = elementDrag(e);可能不是您想要的。它将调用elementDrag(e)的返回值设置为document.onmousedown处理程序，即undefined，因为您不会从该函数返回任何内容。 -
没有看足够多的代码来知道是否还有其他问题，所以现在不会关闭，而是“JavaScript - onclick event getting called automatically 的可能重复”。
-
你说得对，这是我的问题之一。但是，我会礼貌地不同意，因为我的主要问题是鼠标移动时 e.clientY 没有改变。所以这是问题的一部分，但不是我目前要关注的问题。
-
我们开始，问题已解决。应该更新 JS 代码，如果将其粘贴到文本编辑器中，error.innerHTML 应该根据情况更改：mousedown - "a"; mousedown 和 mousemove - "0, var count"; mouseup - “清除！”；不幸的是，这并不能解决我原来没有更改 e.clientY 的问题。所以如果有人有任何想法，请发表。谢谢！ （另外，小错误。只要鼠标在文档上而不是 div 上按下，事件就会激活。不是很关心，只是想让你们知道。）
标签： javascript events draggable