鼠标拖动div代码
原理：鼠标单击title时候给需要移动的div块添加mouseMove与mouseUp
在mouseMove中不断改变 div 坐标，使之随着运动
mouseUp的时候移除div的 mousemove 和mouseup 事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>drag</title>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var drag=new dragMing("#title","#main");
function dragMing(idORclass1,idORclass2){
var obj=this;
this.idORclass1=idORclass1;
this.idORclass2=idORclass2;
this.deltaX=0;
this.deltaY=0;
function dragStart(dragEvent){
obj.deltaX=dragEvent.clientX-$(obj.idORclass2).offset().left;
obj.deltaY=dragEvent.clientY-$(obj.idORclass2).offset().top;
$(document).bind("mousemove",dragMove);
$(document).bind("mouseup",dragStop);
dragEvent.preventDefault();
}
function dragMove(dragEvent){
$(obj.idORclass2).css({
"left":(dragEvent.clientX-obj.deltaX)+"px",
"top" :(dragEvent.clientY-obj.deltaY)+"px",
})
dragEvent.preventDefault();
}
function dragStop(){
$(document).unbind("mousemove",dragMove);
$(document).unbind("mouseup",dragStop);
}
$(document).ready(function(){
$(obj.idORclass1).bind("mousedown",dragStart);
})
}
</script>
</head>
<style type="text/css">
body{
margin:0;
padding:0;
}
#main{
position:absolute;
width:100px;
height:200px;
color:red;
background-color:yellow;
}
#title{
width:100px;
height:20px;
background-color:#00FF00;
border:5px;
}
</style>
<body>
<div id="main">
<div id="title"></div>
</div>
</body>
</html> 相关推荐
lupeng 2020-11-14
sjcheck 2020-11-10
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21
dadaooxx 2020-06-16