E.ClientY in Draggable HTML Elements

Question

I've been working on a project and am stuck with an issue. I'm trying to make multiple up-and-down sliders which move along the y-axis when being dragged. I started with a base of W3Schools code for a draggable element (https://www.w3schools.com/howto/howto_js_draggable.asp), then built it off from there. However, something with the e.clientY is not working. When testing, I've found that it hasn't changed its value. If anyone has any ideas, they would be greatly appreciated. Thank you! P.S. Sorry about all of the testing code, I haven't cleaned it up yet. Some comments and functions aren't really relevant to the program.

HTML: 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(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;
}

(Sorry about not putting it as a code snippet, but it doesn't work as it has before when I've tested it.)

Answer 1

I found a (sort of) solution to my problem. You can find a link to this at http://jsfiddle.net/0rjt6svy/. Some updates for anyone with similar problems: 1. Line 35 had func(e). However, removing the e changed the mouse event every time, so that the e.clientY was different and therefore a different variable, allowing the div to move. 2. I removed a line of code that was screwing things up which was commented out on line 44. So it does move now, just not really in the way that I thought. I'm going to keep updating it, and if anyone has any suggestions for making it better or fixing it, please tell me! (Also, a big shout out to Kaiido for amazing suggestions for which I couldn't fix this without.)

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