寫了一個拖拽窗口，項目中會用到，所以就當(dāng)作一個筆記，要用直接來復(fù)制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” 等輸入框的時候，就不能獲取焦點了，當(dāng)然也可以給點擊事件加上獲取焦點的代碼，就能輸入了，但是輸入框里的文字沒有辦法用鼠標(biāo)選中，有點奇怪。不知道有沒有哪位大神可以解決這個問題的，感激不盡吶
