好资源导航 » 文章资讯 » JavaScript简单拖拽效果（1）

JavaScript简单拖拽效果（1）

2024-02-23 16:19:05 50

拖拽在前端开发中是很常见的功能，也是基本功之一，本文是不限制范围的拖拽也就是最简单的拖拽，鼠标按下对象，拖拽，松开停止！
1，onmousedown事件
2，onmousemove事件
3，onmouseup事件

因为在按下时拖动，所以onmousemove事件在down后才注册，up事件是用来解绑事件，消除事件！





简单拖拽

*{
margin:0;
padding:0;
}
#div1{
width:100px;
height:100px;
background:orange;
position:absolute;
}

functiongetStyle(obj,attr){ if(obj.currentStyle){ returnobj.currentStyle[attr]; }else{ returngetComputedStyle(obj,null)[attr]; } } varoDiv=document.getElementById('div1'); oDiv.onmousedown=function(ev){ varoEvent=ev||event; //vardisX=oEvent.clientX-oDiv.offsetLeft; //vardisY=oEvent.clientY-oDiv.offsetTop; vardisX=oEvent.clientX-parseInt(getStyle(oDiv,'left')); vardisY=oEvent.clientY-parseInt(getStyle(oDiv,'top')); document.onmousemove=function(ev){ varoEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; }; returnfalse; };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

JavaScript简单拖拽效果（1）

热门推荐

随机推荐