javaScript:结合mousedown、mousemove、mouseup事件，实现拖动方块在页面内移动（代码）

效果需求：鼠标长按实现拖拽该方块移动，鼠标松开后将方块停在当前的位置

注意点如下：

mousemove、mouseup是全局有效，使用时用document
mousemove鼠标移动事件后，通过在mouseup里面设置this.onmousemove = null;即可实现触发鼠标抬起事件onmousemove
记得给点击的对象添加样式position:absolute

代码如下：

<style>*{margin: 0;padding: 0;}body{ width: 2000px;height: 2000px;}div{width: 100px;height: 100px;background-color:bisque;margin-left: 100px;position: absolute;}</style>

<div></div>

<script>var box = document.querySelector('div');//点击DIVbox.addEventListener('mousedown',function(e){// console.log(e)//DIV跟随鼠标移动document.onmousemove = function(e){var e = e || window.eventbox.style.top = e.pageY - 50 + 'px';box.style.left = e.pageX - 150 + 'px';} document.onmouseup = function(e){//清除鼠标移动效果，触发mouseup 事件this.onmousemove = null;//把当前光标坐标给DIVvar e = e || window.eventbox.style.top = e.pageY - 50 + 'px';box.style.left = e.pageX - 150 + 'px';} })</script>

javaScript:结合mousedown、mousemove、mouseup事件，实现拖动方块在页面内移动（代码）相关推荐

mousedown mousemove mouseup 与 click事件冲突的解决办法
使用css样式pointer-events解决需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中,但是click的触发条件就是mousedown+mouseup ...
touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
javascript 实现简单拖拽(鼠标事件 mousedown mousemove mouseup)
效果图: 可以通过 https://littlehiuman.github.io/06-Dragable/index.html 查看效果. https://github.com/littleHiuma ...
基本拖拽效果,使用 mousedown , mousemove , mouseup实现
1.一个div拖拽效果 <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
WPF：MouseDown、MouseUP事件，鼠标按下不起作用
后台代码设置按钮按下.释放的事件通常我们会为按钮btn添加MouseDownEvent和MouseUpEvent事件,,如下: public MainWindow() {InitializeComp ...
JavaScript区分click事件和mousedown（mouseup、mousemove）方法
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...
@dragstart 与 @mousedown拖拽事件
想要实现拖拽效果,可以用@dragstart和 @mousedown两个方法,但是真要使用时,用哪一个呢?具体请看以下两者的区别. @dragstart使用场景: 有明确的拖拽区域与界限拖拽灵活度要 ...
需求：结合mousedown、mousemove、mouseup事件让div可以被拖动起来
需求:结合mousedown.mousemove.mouseup事件让div可以被拖动起来注意:所谓的拖动指的是,在div上按下鼠标左键不松开,然后移动鼠标,div会随着鼠标移动,一旦松开鼠标,di ...
mousedown、mouseup、click事件之间的关系及执行顺序
三个事件的触发时机 mousedown 当鼠标指针移动到元素上方,并按下鼠标按键(左.右键均可)时,会发生 mousedown 事件. 与 click 事件不同,mousedown 事件仅需要按键被按 ...

javaScript:结合mousedown、mousemove、mouseup事件，实现拖动方块在页面内移动（代码）

javaScript:结合mousedown、mousemove、mouseup事件，实现拖动方块在页面内移动（代码）相关推荐

最新文章

热门文章