简单实现js拖拽效果
更新时间：2017年07月25日 14:58:18 作者：diasa
这篇文章主要教大家如何简单实现js拖拽效果，很详细的js拖拽效果实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js拖拽效果展示的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
#box{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background:#ff6600;
margin:-100px 0 0 -100px;
cursor:move;
/*
不知道宽高的情况下的居中
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
*/
}
</style>
</head>
<body>
<div id='box'>
</div>
<script>
//JS实现让当前的元素在屏幕居中的位置
var box = document.getElementById('box');
// box.style.top = ((document.documentElement.clientHeight || document.body.clientHeight)-box.offsetHeight)/2 + "px";
// box.style.left = ((document.documentElement.clientWidth || document.body.clientWidth)-box.offsetWidth)/2 + "px";
//拖拽的原理
/*
当鼠标在盒子上按下的时候，我们开始拖拽（给盒子绑定onmousemove和onmouseup），当鼠标移动的时候，我们计算盒子的最新位置
当鼠标抬起的时候说明拖拽结束了，我们的move和up就没用了，我们再把这两个方法移除
*/
box.onmousedown = down;
function down(e){
e = e || window.event;
//记录开始位置的信息
this["strX"] = e.clientX;
this["strY"] = e.clientY;
this["strL"] = parseFloat(this.style.left);
this["strT"] = parseFloat(this.style.top);
//给元素绑定移动和抬起的事件
if(this.setCapture){
this.setCapture()//把当前的鼠标和this绑定在一起
this.onmousemove = move;
this.onmouseup= up;
}else{
var _this = this;
document.onmousemove = function(e){
// move(e)//这个里面的this是window
move.call(_this,e);
}
;
document.onmouseup= function(e){
up.call(_this,e);
};
}
}
function move(e){
e = e || window.event;
var curL = (e.clientX-this["strX"])+this["strL"];
var curT = (e.clientY-this["strY"])+this["strT"];
//边界判断
var minL = 0,minT = 0,maxL = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth,maxT = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
curL = curL < minL ? minL :(curL > maxL ? maxL : curL);
curT = curT < minT ? minT :(curT > maxT ? maxT : curT)
this.style.left = curL + "px";
this.style.top = curT + "px";
}
function up(e){
if(this.releaseCapture){
this.releaseCapture();//把当前的鼠标和盒子解除绑定
this.onmousemove = null;
this.onmouseup= null;
}else{
document.onmousemove = null;
document.onmouseup= null;
//这样绑定的话，move和up绑定的this都是document
}
}
//当鼠标移动过快的时候，我们的鼠标会脱离盒子，导致盒子的mousemove和mouseup事件都移除不到->"鼠标焦点丢失"
//在IE和火狐浏览器中，我们用一个方法把盒子和鼠标绑定在一起即可。
//鼠标再快也跑不出去文档:我们把mousemove和mouseup绑定给document
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JavaScript中类型判断的相关常见方法,文中的示例代码讲解详细,对我们深入学习JavaScript有一定帮助,需要的可以参考下2023-11-11
这篇文章主要为大家介绍了unicloud云开发进阶获取首页列表数据示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了原生JS实现目录滚动特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
今天看到 司徒一篇blog， javascript深拷贝，其中涉及到一种判断类型的方法，特分析如下2010-03-03
这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了bootstrap table复杂操作代码，生成外层表格，填充表格内容,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了JS集成fckeditor及判断内容是否为空的方法,涉及fckeditor的设置及页面元素的操作技巧,并分析了php环境下配置文件上传的注意事项,需要的朋友可以参考下2016-05-05
在静态html页面中引用子页面，类似动态页面方式inlcude一个共享的小片段2008-10-10
读JavaScript DOM编程艺术笔记，需要的朋友可以参考下。2011-11-11
这篇文章主要为大家介绍了前端技巧之HTTP中POST提交数据四种方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论