How to Cancel Scroll Button

I would like to create an event like an editor, such as the one below that moves the elements by pressing the wheel button on the mouse, but when the scroll bar is out, scrolling takes precedence and the elements cannot move well.
Is there any good way?

code snippets:

vara= document.createElement("div")
a.style.width=a.style.height="100px"
a. style.backgroundColor="blue"
a.style.top="500px"
a. innerHTML = "To ensure height"

varb = document.createElement("div")
b.style.width=b.style.height="100px"
b. style.backgroundColor="red"
b. innerHTML = "Medium Button Drag to Move"
a. style.position=b. style.position="absolute"
document.body.appendChild(a)
document.body.appendChild(b)b)

vardrag=false
varpreX
var preY
b. addEventListener("musedown", (e) = > {
    if(e.button==1){
        drag = true
        preX=e.clientX
        preY = e.clientY
    }
})
window.addEventListener("mousemove",(e)=>{
    if(drag){
        b.style.left=(parseInt(b.style.left)||0)+e.clientX-preX+"px"
        b.style.top=(parseInt(b.style.top||0))+e.clientY-preY+"px"
        preX=e.clientX
        preY = e.clientY
    }
    
})
window.addEventListener("mouseup",()=>{
    drag = false
})

<html>
  <head><title></title></head>
  <body>
  </body>
</html>

javascript

2022-09-30 20:23

1 Answers

mousedown
Default behavior
Start drag/drop operations, start text selection (if supported, in combination with a middle button) start scroll/pan, etc.(From MDN web docs)
The default behavior cancellation resolved the issue.

2022-09-30 20:23

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656