用JS代码来操作元素拖拽移动的效果
一、先看要执行后的效果
可以看到,我把一个元素在当前浏览器框内拖拽并且元素随着鼠标的拖拽而移动
二、看完效果后,来捋一下我们要执行效果都有哪些?
1. 要获取元素节点的信息
2. 需要对该元素进行鼠标按下事件
3. 还需要鼠标移入事件与在该元素的按下事件配合实现拖拽效果
4. 最后在鼠标在该元素内抬起的同时对鼠标移入事件进行解绑
三、根据目录二来编写代码过程
1. 获取元素节点的信息
<body>
<div id="div1"></div>
<script>
//获取要对谁实现效果的元素节点
var done=document.getElementById('div1');
</script>
</body>
2. 对该元素进行鼠标按下事件绑定
done.onmousedown = function(e){
//e 代表事件触发是鼠标与绑定元素之间的信息
//获取鼠标按下时获取鼠标到绑定元素的X轴坐标和Y轴坐标
//后续代码中如果对其进行拖拽则需要减去鼠标在该元素内的X和Y轴坐标
//否则进行赋值时鼠标在该元素内的坐标就会为0
var oleft = e.offsetX;
var otop = e.offsetY;
}
3.配合鼠标移入事件实现拖拽效果
//需要将该事件放在上一个鼠标在该元素内按下的事件的里面
//鼠标需要通过按下和移入事件的配合来实现拖拽效果
document.onmousemove = function(e){
//这个地方的 e 为鼠标移入事件触发时鼠标与整个浏览器页面之间的信息
//还需要获取鼠标在浏览器页面移动是的X和Y的坐标
//同时需要保留鼠标在该元素内的X和Y轴坐标
//所以需要将鼠标在整个浏览器页面的X和Y轴的坐标减去鼠标在元素内的X和Y轴坐标
var left = e.clientX-oleft ;
var top = e.clientY-otop ;
//通过获取的坐标修改div的位置
//然后将当前鼠标移动时的坐标赋值给当前done元素从而来实现效果
//这里一定要对该元素的赋值拼接一个字符串'px'
//因为获取的X和Y轴的坐标都是Number数据类型还没有px单位
done.style.left = left "px";
done.style.top = top "px";
}
当前已经写了的代码如下
done.onmousedown = function(e){
var oleft = e.offsetX;
var otop = e.offsetY;
console.log(oleft)
console.log(otop)
//鼠标需要通过按下和移入事件的配合来实现拖拽效果
document.onmousemove = function(e){
//获取鼠标坐标
//还需要获取鼠标在浏览器页面移动是的X和Y的坐标
var left = e.clientX ;
var top = e.clientY ;
//通过获取的坐标修改div的位置
//然后将当前鼠标移动时的坐标赋值给当前div1元素从而来实现效果
done.style.left = left "px";
done.style.top = top "px";
}
}
其实这里已经有基本效果了
带大家看一下效果
但是在你鼠标抬起时不进行拖拽了这个元素还是会跟着鼠标移动
4. 所以我们要鼠标在该元素内抬起的同时对鼠标移入事件进行解绑
// 为元素绑定鼠标抬起事件
//最后在鼠标在该元素内抬起时进行鼠标在浏览器内移动事件进行解绑
done.onmouseup = function(){
//在鼠标在该元素内抬起的时候把鼠标在整个浏览器中进行移入的效果置空解绑
//停止操作
document.onmousemove = null;
}
最后效果就成了
拜拜各位,下次再见
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhejihgc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13