I have this but it doesn't work

var box = document.getElementById("box");

window.addEventListener('mousemove', function(e){
    var left = e.pageX;
    box.style.left = left;
});

If I just replace box.style.left = left; with jQuery it works fine

$('#wrap').css ({   
    left: left  
});

but I'm just so confused... Why is box.style.left = left; not working when it's practically the same thing?

I have this but it doesn't work

var box = document.getElementById("box");

window.addEventListener('mousemove', function(e){
    var left = e.pageX;
    box.style.left = left;
});

If I just replace box.style.left = left; with jQuery it works fine

$('#wrap').css ({   
    left: left  
});

but I'm just so confused... Why is box.style.left = left; not working when it's practically the same thing?

• javascript

2 Answers 2

The CSS left property requires units. You're not giving it any. jQuery's css adds "px" for you when you give it a number, which is why the jQuery one works.

Add a "px":

box.style.left = e.pageX + "px";

You also have to give top value

Hope this snippet will help

    var box = document.getElementById("box");

window.addEventListener('mousemove', function(e){
    var left = e.pageX+"px";
    box.style.left = left;
});

.moveAble {
    position: absolute;
}

<div id="box" class="moveAble">
AAAA
</div>