Question

i was trying to make a drag able element but i failed…
i don’t want to use jquery.

i got the following html code:

<div id='area'>
  <div id='drag'></div>
</div>

i want to drag id=’drag’ inside id=’area’ and not going out of it.

sorry for my bad English and for my newbie question.

EDIT:

Area.addEventListener("mousemove", function (e) {
    var X, Y;
    X = e.offsetX;
    Y = e.offsetY;
    Information.innerHTML = 'X:' + X + ' - ' + 'Y:' + Y;
});

img.addEventListener("mouseover", function () {
    this.style.cursor = 'move';
    this.addEventListener("mousemove", function (e) {
        var X, Y;
        X = e.offsetX;
        Y = e.offsetY;
        Information2.innerHTML = 'X:' + X + ' - ' + 'Y:' + Y;
    });
});

idk how to get the X and Y of the Area to add it to img

Answer 1

Have a look at this. I found this online. I think this what you are looking for :

Javascript Draggable