码迷,mamicode.com
首页 > Web开发 > 详细

js拖拽效果

时间:2020-04-06 20:31:15      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:query   on()   func   需要   还需   一个   select   nbsp   off   

 

先创建一个div

<script>

//获取这个div

var div=document.querySelector("div");

/ 按下时开始监听在文档中鼠标移动的事件
// 开始监听鼠标松开键的事件
// 只有按下时才准备拖拽
div.onmousedown=function(e1){
// 当鼠标在文档移动时,不能再div上移动,因为鼠标可能离开div,造成无法拖拽
document.onmousemove=function(e){
// 当鼠标移动时,将当前鼠标相对视口的坐标赋值给元素的left和top
// 因为我们需要在按下的位置拖拽,因此我们还需要获取按下键鼠标相对div的左上角位置
// 使用当前鼠标位置减去这个相对元素的左上角位置,保证鼠标所按位置拖拽
div.style.left=e.clientX-e1.offsetX+"px";
div.style.top=e.clientY-e1.offsetY+"px";
}
// 当释放鼠标键时,删除鼠标移动事件和删除鼠标释放事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}

</script>

js拖拽效果

标签:query   on()   func   需要   还需   一个   select   nbsp   off   

原文地址:https://www.cnblogs.com/moshouhu/p/12643932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!