原生js实现拖拽效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>hello2</title></head><style>#box1{position: absolute;width: 100px;height: 100px;background: blue;cursor: move;}</style><body><divid="box1"></div></body></html><scripttype="text/javaScript">// 拖拽box1元素// 拖拽的流程// 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown// 2。当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove// 3。当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
window.onload=function(){//获取box1var box1 = document.getElementById("box1");//为box1绑定一个鼠标按下事件///当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
box1.onmousedown=function(event){//设置box1捕获所有鼠标按下的事件// if(box1.setCapture){// box1.setCapture();// }// box1.setCapture && box1.setCapture();var event = event || window.event;//div的偏移量 鼠标clentX- 元素.offsetLeft//div的偏移量 鼠标.clentY - 元素.offsetTopvar ol = event.clientX - box1.offsetLeft;var ot = event.clientY - box1.offsetTop;//为document绑定一个onmousemove事件
document.onmousemove=function(event){var event = event || window.event;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove//获取鼠标的坐标var left = event.clientX -ol;var top = event.clientY- ot;//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";};//为元素绑定一个鼠标松开事件
document.onmouseup=function(event){//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup//取消document的onmousemove事件this.onmousemove =null;//取消document的onmouseup事件this.onmouseup =null;
console.log("nihao");//当鼠标松开时，取消对事件的捕获// box1.releaseCapture();// box1.releasePointerCapture && box1.releasePointerCapture();};//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为//不这对IE8不起作用returnfalse;};};</script>
本文转载自: https://blog.csdn.net/weixin_43447266/article/details/129469081
版权归原作者 刘昕hrf 所有， 如有侵权，请联系我们删除。
版权归原作者 刘昕hrf 所有， 如有侵权，请联系我们删除。