javascrip&jQuery 自制鼠标拖动div
2018-03-15 本文已影响0人
流蓝浅
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
.window{
width: 200px;
height:200px;
background: navajowhite;
margin: auto;
position: absolute;
}
.title{
height: 30px;
width: 180px;
background: khaki;
cursor: move;
float: left;
}
.close{
height: 30px;
width: 20px;
line-height: 30px;
float: right;
/*background: darkblue;*/
cursor:default;
}
</style>
<script type="text/javascript">
$(function(){
$(".close").click(function(){
$(".window").hide()
})
$(".title")[0].onmousedown = function(e){
var _x = e.clientX-$(".window")[0].offsetLeft;
var _y = e.clientY-$(".window")[0].offsetTop;
document.onmousemove = function(e){
$(".window")[0].style.left = e.clientX - _x + "px";
$(".window")[0].style.top = e.clientY- _y + "px";
}
}
$(".title")[0].onmouseup = function(){
document.onmousemove = null;
}
})
</script>
</head>
<body>
<div class="window">
<div class="title">
</div>
<div class="close">
×
</div>
</div>
</body>
</html>
