本文主要详细介绍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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。