写了一个拖拽窗口，项目中会用到，所以就当作一个笔记，要用直接来复制n.n
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拖拽</title>
<style>
*{
margin:0;
padding:0;
}
.moveBox{
width: 600px;
height: 400px;
position: absolute;
left: 100px;
top: 100px;
border:2px solid #000;
display: none;
}
.moveBox .moveBox-header{
width:100%;
height:30px;
background-color: #cccccc;
}
.moveBox .moveBox-close{
padding:0 6px;
position:absolute;
right:8px;
top:8px;
}
#open{
font-size:30px;
}
</style>
<script src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
var moveBox = $(".moveBox");
var moveHeader = $(".moveBox-header");
moveHeader.on("mousedown",function(e){
var disX = e.clientX - moveBox.offset().left;
var disY = e.clientY - moveBox.offset().top;
function move(e){
var l = e.clientX - disX;
var t = e.clientY - disY;
moveBox.css({"left":l,"top":t});
}
function up(){
$(document).off("mousemove",move);
$(document).off("mouseup",up);
}
$(document).on("mousemove",move);
$(document).on("mouseup",up);
});
$(".moveBox-close").on("click",function(){
moveBox.css({"display":"none"});
});
$("#open").on("click",function(){
moveBox.css({"display":"block"});
});
});
</script>
</head>
<body>
<input type="button" value="open" id="open">
<div id="moveBox" class="moveBox">
<div class="moveBox-header"></div>
<input class="moveBox-close" type="button" value="×"/>
<div class="moveBox-content"></div>
</div>
</body>
</html>
效果图：
Paste_Image.png
点击小窗口灰色的部分可以拖拽窗口，如果想要拖拽哪里都能移动窗口，也可以把事件直接加在窗口上，但是如果窗口里面有input type = “text” 等输入框的时候，就不能获取焦点了，当然也可以给点击事件加上获取焦点的代码，就能输入了，但是输入框里的文字没有办法用鼠标选中，有点奇怪。不知道有没有哪位大神可以解决这个问题的，感激不尽呐
