您的位置：首页 > Web前端 > JavaScript

js实现拖拽

2014-11-11 16:42 239 查看

拖拽：最核心是三个事件，鼠标按下，鼠标移动，鼠标弹起。按下时激活拖拽，然后时刻根据鼠标的位置来更新物体的left和top值，达到跟随鼠标的效果，鼠标弹起则取消拖拽。

以下是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="gbk" />
<title>拖拽</title>
<style>
*{
margin:0px;
}
div{
height:200px;
width:200px;
background:red;
position: absolute;
cursor:pointer;

}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById('d');
odiv.onmousedown=function(event){
var e=event||window.event;
var difx=event.clientX-odiv.offsetLeft;//刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动,difx和dify为点击处
var dify=event.clientY-odiv.offsetTop; //离物体左上角（实际位置）的距离

document.onmousemove=function(event){

var event=event||window.event;
var left=event.clientX-difx;
var top=event.clientY-dify;
var maxleft=document.documentElement.clientWidth-odiv.offsetWidth;  //计算最大移动距离
var maxtop=document.documentElement.clientHeight-odiv.offsetHeight;
left=left<0?0:left;                //防止越界
left=left>maxleft?maxleft:left;
top=top<0?0:top;
top=top>maxtop?maxtop:top;

odiv.style.left=left+'px';    //时刻更新位置达到跟随鼠标
odiv.style.top=top+'px';

}
document.onmouseup=function(){ //鼠标弹起，取消事件
document.onmouseup=null;
document.onmousemove=null;
}
}

}

</script>
</head>
<body>
<div id='d'></div>
</body>
</html>

原理很简单，但实现过程要考虑很多细节，如刚移动时物体要在原有的位置点开始移动，而不是事件发生的位置处开始移动，还有计算物体有没有越界，越界则停止移动等细节问题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航