Question

我一直在从事一个项目，并且遇到了问题。我正在尝试制作多个在拖动时沿y轴移动的上下滑块。我从W3Schools代码的可伸缩元素（https://www.w3schools.com/howto/howto_js_draggable.asp）开始，然后从那里开始构建它。但是，使用e.clientY的东西不起作用。测试时，我发现它的值没有改变。如果有人有任何想法，将不胜感激。谢谢！附言抱歉，所有测试代码尚未清除。一些注释和功能与程序无关。

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

（很抱歉没有将其作为代码片段，但它无法像我之前测试过的那样起作用。）

Answer 1

我找到了解决问题的一种方法。您可以在http://jsfiddle.net/0rjt6svy/上找到此链接。针对具有类似问题的任何人的一些更新：1.第35行具有func（e）。但是，删除e每次都会更改鼠标事件，因此e.clientY是不同的，因此是不同的变量，从而允许div移动。 2.我删除了一行搞砸了的代码行，该行在第44行被注释掉。所以它现在确实在移动，只是不完全按照我的想法。我将继续对其进行更新，如果有人对它进行改进或修复有任何建议，请告诉我！（此外，向海道大声疾呼，要求提供令人惊奇的建议，而如果没有这些建议，我将无法解决。）

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

可拖动HTML元素中的E.ClientY

1 个答案: