js实现小窗口拖拽效果
本文实例为大家分享了js实现窗口拖拽的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
height: 300px;
width: 300px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
//鼠标按下的函数
box.onmousedown = function(ev) {
var oEvent = ev || event;
//求出鼠标和box的位置差值
var x = oEvent.clientX - box.offsetLeft;
var y = oEvent.clientY - box.offsetTop;
//鼠标移动的函数
//把事件加在document上，解决因为鼠标移动太快时，
//鼠标超过box后就没有了拖拽的效果的问题
document.onmousemove = function(ev) {
var oEvent = ev || event;
//保证拖拽框一直保持在浏览器窗口内部，不能被拖出的浏览器窗口的范围
var l = oEvent.clientX - x;
var t = oEvent.clientY - y;
if(l < 0) {
l = 0;
} else if(l > document.documentElement.clientWidth - box.offsetWidth) {
l = document.documentElement.clientWidth - box.offsetWidth;
}
if(t < 0) {
t = 0;
} else if(t > document.documentElement.clientHeight - box.offsetHeight) {
t = document.documentElement.clientHeight - box.offsetHeight;
}
box.style.left = l + "px";
box.style.top = t + "px";
}
//鼠标抬起的函数
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
}
//火狐浏览器在拖拽空div时会出现bug
//return false阻止默认事件，解决火狐的bug
return false;
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍js实现百度登录窗口拖拽效果，包括了js实现百度登录窗口拖拽效果的使用技巧和注意事项，需要的朋友参考一下 前言 在我们使用百度相关的功能网页的时候，我们要去登录账号。但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢？下面分享仿百度登录拖拽效果的源码 代码 总结 上面的代码就是仿百度登录窗口效果的实现，小伙伴们把代码复制到编译器上面看效果。希望对学习前端开发的小伙们有帮助。 以上就是
-
本文向大家介绍JS实现盒子拖拽效果，包括了JS实现盒子拖拽效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现盒子拖拽效果的具体代码，供大家参考，具体内容如下 效果: html代码: css代码: js代码: 关于事件的用法,官方用到了object.addEventListener("dragover", myScript)和event.target.id 以上就是本文的全部
-
本文向大家介绍原生JS实现拖拽效果，包括了原生JS实现拖拽效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JS实现拖拽效果的具体代码，供大家参考，具体内容如下 想要让整个元素移动需要三个事件： 鼠标按下 onmousedown 鼠标移动 onmousemove 鼠标抬起 onmouseup html JS CSS部分 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多
-
本文向大家介绍js css3实现图片拖拽效果，包括了js css3实现图片拖拽效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了css3实现图片拖拽效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍JS实现图片拖拽交换效果，包括了JS实现图片拖拽交换效果的使用技巧和注意事项，需要的朋友参考一下 JS实现图片拖拽交换效果，供大家参考，具体内容如下 听 WEB前端javascript企业实战班 公开课，用JS实现了图片拖拽交换的目的；感谢老师的讲解。 实现要点 鼠标点击onmousedown：获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元
-
本文向大家介绍Vue.Draggable实现拖拽效果，包括了Vue.Draggable实现拖拽效果的使用技巧和注意事项，需要的朋友参考一下 快速实现Vue.Draggable的拖拽效果，供大家参考，具体内容如下 1.下载包：npm install vuedraggable 配置：package.json 2.在你的组件中引进依赖： 3.注册：draggable这个组件 4.使用html模板中使用该