本文主要详细介绍js的简单拖拽效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享js实现简单拖拽效果的具体代码，供大家参考。具体内容如下
1.拖拽的基本效果
思路：
当鼠标按在框上时，准备移动(事件添加到对象)
当鼠标移动时，框随鼠标移动(事件被添加到页面)
当鼠标抬起时，框停止移动(事件被添加到页面中)
var o=document . query selector(' div ')；
//鼠标按下
o.onmousedown=function (e) {
//鼠标相对于框的位置
var offsetX=e . clientx-o . offset left；
var offsetY=e . clienty-o . offsettop。
//鼠标移动
document . onmousemove=function(e){
o . style . left=e . clientx-offsetX ' px '；
o . style . top=e . clienty-offsetY ' px '；
}
//鼠标抬起
document.onmouseup=function () {
document.onmousemove=null
document.onmouseup=null
}
}
2.拖拽的问题
如果框中有文字，或者框本身是图片，由于浏览器的默认行为(文字和图片本身可以拖拽)，我们可以设置return false来阻止其默认行为，但是这种默认的拦截行为在IE的下版本中并不适用，可以使用全局捕捉来解决IE的问题。
全局捕获
全局捕获仅适用于IE版本较低的浏览器。
button btn1/按钮
button BTN 2/按钮
脚本
var BTS=document . query selector all(' button ')
bts[0]。onclick=function () {
console . log(1)；
}
bts[1]。onclick=function () {
console . log(2)；
}
//bts[0]。setCapture() //添加全局捕获
//bts[0]。releaseCapture()。//释放全局捕获
/脚本
一旦为指定节点添加了全局捕获，页面中的其他元素将不会触发相同类型的事件。
3.完整版的拖拽
var o=document . query selector(' div ')；
//鼠标按下
o.onmousedown=function (e) {
低版本if (o.setCapture) {//IE
o.setCapture()
}
e=e || window.event
//鼠标相对于框的位置
var offsetX=e . clientx-o . offset left；
var offsetY=e . clienty-o . offsettop。
//鼠标移动
document . onmousemove=function(e){
e=e || window.event
o . style . left=e . clientx-offsetX ' px '；
o . style . top=e . clienty-offsetY ' px '；
}
//鼠标抬起
document.onmouseup=function () {
document.onmousemove=null
document.onmouseup=null
if (o.releaseCapture) {
o . release capture()；//释放全局捕获
}
}
返回false//标准浏览器的默认行为
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。