var deltaX; var deltaY; var move = document.getElementById("move"); function getMouse(e) { move.style.left = (e.pageX - deltaX) + "px"; move.style.top = (e.pageY - deltaY) + "px"; console.log() if (move.offsetLeft >= 700) { move.style.left = 699 + "px"; } if (move.offsetTop <= 200 || move.offsetTop >= 202) { move.style.top = 201 + "px"; } } move.onmousedown = function(e) { deltaX = e.pageX - move.offsetLeft; deltaY = e.pageY - move.offsetTop; window.addEventListener('mousemove', getMouse); } move.onmouseup = function(e) { window.removeEventListener('mousemove', getMouse); } 
 #divStyle { display: flex; align-items: center; width: 1000px; height: 500px; outline: 1px solid red; position: relative; } #move { width: 200px; height: 100px; outline: 1px solid green; position: absolute; } 
 <div id="divStyle"> <div id="move"></div> </div>

Drag the green block, sticking sometimes happens, move.onmouseup does not work. Please tell me why?

  • Because while dragging, you leave the page where the green block is located. You can make a check if the pointer went outside the container, then call the onmousedown method. And then sticking will not. - Puvvl
  • And if just onmouseup on a parent hang? I did something like the norm, I do not know if it is right or not - Sinevik

1 answer 1

Something like this.

 var deltaX; var deltaY; var move = document.getElementById("move"); var divStyle = document.getElementById("divStyle"); var divLeft = divStyle.offsetLeft; var divRight = divStyle.offsetLeft + divStyle.offsetWidth; function getMouse(e) { move.style.left = (e.pageX - deltaX) + "px"; move.style.top = (e.pageY - deltaY) + "px"; if (move.offsetLeft >= 700) { move.style.left = 699 + "px"; } if (move.offsetTop <= 200 || move.offsetTop >= 202) { move.style.top = 201 + "px"; } if (getMousePosition(e).x < divLeft || getMousePosition(e).x > divRight) { console.log(getMousePosition(e).x < divLeft || getMousePosition(e).x > divRight) window.removeEventListener('mousemove', getMouse); } } function getMousePosition(e) { var x = y = 0; if (!e) { var e = window.event; } if (e.pageX || e.pageY) { x = e.pageX; y = e.pageY; } else if (e.clientX || e.clientY) { x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return { x: x, y: y } } move.onmousedown = function(e) { deltaX = e.pageX - move.offsetLeft; deltaY = e.pageY - move.offsetTop; window.addEventListener('mousemove', getMouse); } move.onmouseup = function(e) { window.removeEventListener('mousemove', getMouse); } 
 #divStyle { display: flex; align-items: center; width: 300px; padding: 30px; height: 300px; outline: 1px solid red; position: relative; } #move { width: 50px; height: 50px; outline: 1px solid green; position: absolute; } 
 <div id="divStyle"> <div id="move"></div> </div>