CODEWITHSUNDEEP
javascripthtmlcss
Jason G
Jason G

Reputation: 35

style.left will not update

I can't figureout why note.style.left = (e.clientX - offLeft) + "px"; and note.style.top = (e.clientY - offTop) + "px"; will not update themselves.
I've looked at a ton of examples. Some right from stackoverflow. And I've console.log()'d out each of the variables and I can't figure it out. At first, I thought that the numbers weren't getting subtracted properly because they might have been strings. I did typeof and confirmed they are numbers and the math is proper. I made sure that the style.left could actually set a number by using note.style.left = 25 + "px";. So that means I'm accessing the property properly.

I don't know what's happening. I've spent a few days looking at a few lines of code and loggin, and looking at w3c and it seems to me that the code should work. It does not lol. I would really appreciate some help.

FYI - I realize that I have not applied mouseup and/or removed the event listeners. I am trying to get one step at a time working.

var note = document.getElementById("test-note");
var show = document.getElementById("output");

note.addEventListener("mousedown", mouseDown);

function mouseDown(e){
  note.addEventListener("mousemove", mouseMove);
}

function mouseMove (e){
  //console.log(e);
  var offLeft = e.clientX - e.srcElement.offsetLeft;
  var offTop = e.clientY - e.srcElement.offsetTop;
  note.style.left = (e.clientX - offLeft) + "px";
  note.style.top = (e.clientY - offTop) + "px";
  show.innerHTML = note.style.left;
  //console.log(typeof (e.clientX + "px"));
}
#test-note{
  border: 1px solid black;
  left: 50px;
  top: 25px;
  position: absolute;
}
#output{
    position: absolute;
    left: 100px;
    top: 150px;
}
<div id="test-note">This is my test note</div>

<p id="output"></p>

Upvotes: 2

Views: 1032

Answers (1)

Temani Afif
Temani Afif

Reputation: 273530

The issue is not with the update but the value always being the same.

 (e.clientX - offLeft) = (e.clientX - (e.clientX - e.srcElement.offsetLeft)) = e.srcElement.offsetLeft;

And e.srcElement.offsetLeft is equal to the left value you set, so it will keep changing with the same initial value.

You need to change your logic, make the calculation of offLef/offTop inside the mousedown handler so it become a constant inside the mousemouve handler. You should also use target instead of srcElement

var note = document.getElementById("test-note");
var show = document.getElementById("output");

note.addEventListener("mousedown", mouseDown);
var offLef;
var offTop;

function mouseDown(e){
  note.addEventListener("mousemove", mouseMove);
  offLeft = e.clientX - e.srcElement.offsetLeft;
  offTop = e.clientY - e.srcElement.offsetTop;
}

function mouseMove (e){
  //console.log(e);
  note.style.left = (e.clientX - offLeft) + "px";;
  note.style.top = (e.clientY - offTop) + "px";;
  show.innerHTML = note.style.left;
  //console.log(typeof (e.clientX + "px"));
}
#test-note{
  border: 1px solid black;
  left: 50px;
  top: 25px;
  position: absolute;
}
#output{
    position: absolute;
    left: 100px;
    top: 150px;
}
<div id="test-note">This is my test note</div>

<p id="output"></p>

Upvotes: 1

Related Questions