Javascript 可拖动HTML元素中的E.ClientY

我一直在做一个项目，遇到了一个问题。 我正在尝试制作多个上下滑块，它们在拖动时沿y轴移动。 我从一个可拖动元素（）的代码库开始，然后在此基础上构建它。 然而，e.clientY的某些功能不起作用。测试时，我发现它没有改变它的值。 如果有人有任何想法，我们将不胜感激。非常感谢。 另外，很抱歉所有的测试代码，我还没有清理。有些注释和函数与程序不太相关

HTML: a

</div>
</div>
<button id="Button">
Click Here
</button>
<div id="Error">
TEXT
</div>

（很抱歉没有将其作为代码片段，但在我测试它时，它的工作方式与以前不同。）

我找到了解决问题的（某种）方法。您可以在找到此链接。针对具有类似问题的任何人的一些更新：1。第35行有func（e）。但是，删除e每次都会更改鼠标事件，因此e.clientY是不同的，因此是不同的变量，允许div移动。2.我删除了一行把事情搞砸的代码，这行代码在第44行被注释掉了。所以它现在确实在移动，只是不像我想的那样。我会不断更新它，如果有人有任何改进或修复它的建议，请告诉我！ （此外，我还向Kaido大喊，希望他能给我一些令人惊讶的建议，如果没有这些建议，我将无法解决这个问题。）

HTML：
A.
点击这里
正文
JS:
var b=document.getElementById（“按钮”）；
var area=document.getElementById（“addgraphhere”）；
var etwo；
var计数=0；
var error=document.getElementById（“错误”）；
var点=1；
var区间；
瓦尔·埃尔姆特；
var-canExecute；
b、 onclick=函数addDiv（）{
area.innerHTML+=“”；
point=document.getElementById（'point'）；
}
函数falert（）{alert（“Hello！”）；this.onmousedown=dragMouseDown；}
//从dragElement（图形）开始；
功能牵引装置（elmnt，e）{
变量pos1=0，pos2=0；
/*如果存在，则标题是从中移动DIV的位置：*/
//error.innerHTML=elmnt；
addEventListener（“mousedown”，function（）{dragMouseDown（）；}）；
功能下拉列表（e）{
//error.innerHTML=“dragMouseDown已激活！”；
e=e | | window.event；
//警报（e）；
//在启动时获取鼠标光标位置：
pos2=e.clientY；
canExecute=true；
error.innerHTML=“a”；
//每当光标移动时调用函数：
addEventListener（“mousemove”，函数（）{elementDrag（）；}）；
//document.onmouseup=closeDragElement（）；
}
功能元素拖动（e）{
如果（canExecute==真）{
e=e | | window.event；
计数=计数+1；
//计算新光标位置：
//pos2=e.clientY；
pos1=pos2-e.clientY；
pos2=e.clientY；
//设置元素的新位置：
elmnt.style.position=“绝对”；
elmnt.style.top=（elmnt.offsetTop-pos1）+“px”；
//elmnt.top=（elmnt.offsetTop-
//pos1）+“px”；
error.innerHTML=“（“+pos2+”；“+pos1+”）”，+count；
//error.innerHTML=elmnt.offsetTop+“-”+pos1；
addEventListener（“mouseup”，function（）{closeDragElement（）；}）；
}
}
函数closeDrageElement（）{
/*释放鼠标按钮时停止移动：*/
document.onmouseup=null；
document.onmousemove=null；
error.innerHTML=“已清除！”；
canExecute=false；
}
}
CSS:
#边界{
边框：#000000 5px实心；
宽度：90%；
高度：200px；
}
#图表{
宽度：18%；
高度：190px；
浮动：左；
边框：1px纯黑；
填充物：5px；
字体系列：无衬线；
字体大小：12px；
}
#点{
宽度：8px；
高度：8px；
边界半径：100%；
边框：3px实心#0000FF；
背景色：#AAAAFF；
顶部：100px；
位置：绝对位置；
光标：移动；
}

没有全部阅读（或者说实话，几乎什么都没读），但是

document.onmousedown=elementDrag（e）可能不是您想要的。它将设置调用
elementDrag（e）
到
document.onmousedown
处理程序的返回值，即
未定义的
，因为您没有从该函数返回任何内容。没有查看足够的代码以知道是否存在其他问题，所以现在不会关闭，但“可能重复的”。您是对的，这是我的问题之一。然而，我有礼貌地表示不同意，因为我的主要问题是，当鼠标移动时，e.clientY没有改变。所以这是问题的一部分，但不是我现在要关注的问题。我们开始吧，问题解决了。JS代码应该更新，如果您将其粘贴到文本编辑器中，error.innerHTML应该根据情况进行更改：mousedown—“a”；mousedown和mousemove-“0，变量计数”；鼠标-“清除！”；不幸的是，这并不能解决我最初没有改变e.clientY的问题。因此，如果有人有任何想法，请张贴。谢谢（还有，小错误。当鼠标落在文档上时，事件就会激活，而不是div。不太关心，只是想让你们知道。）
    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;
  }
  }

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

HTML:
<div id="Border">
<div id="AddGraphsHere">
a
</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();});
    //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 = "(" + pos2 + " ; " + pos1 + "), " + count;
      //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;
}