js 拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#draw {
width: 450px;
height: 450px;
border: 2px solid #ccc;
position: relative;
top: 10px;
left: 10px;
cursor: pointer;
}
.content {
background-color: chartreuse;
width: 400px;
height: 400px;
overflow: scroll;
}
</style>
</head>
<body>
<div style="width: 200px;height: 200px;overflow: scroll;">
<div class="content" id="draw">
<!-- <div id="draw"></div> -->
<table>
<thead>
<tr>
<td>第1列</td>
<td>第2列</td>
<td>第3列</td>
<td>第4列</td>
<td>第5列</td>
<td>第6列</td>
<td>第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>第10列</td>
</tr>
</thead>
<tbody>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
<tr>
<td>rows第1列</td>
<td>rows第2列</td>
<td>rows第3列</td>
<td>rows第4列</td>
<td>rows第5列</td>
<td>rows第6列</td>
<td>rows第7列</td>
<td>
<input type="text">
</td>
<td><select name="" id="">
<option value="1">测试1</option>
<option value="1">测试2</option>
</select></td>
<td>rows第10列</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var oDiv = document.getElementById("draw");
var x, y, xw, yw;
oDiv.onmousedown = function (ev) {
e = event || ev;
x = e.clientX;
y = e.clientY;
xw = y - oDiv.offsetTop; // 初始y点距上边框的距离
yw = x - oDiv.offsetLeft; //初始x点距左边框的距离
console.log("onmousedown:" + "x:" + x + ",y:" + y + ",xw:" + xw + ",xy")
document.onmousemove = function (ev) {
e = event || ev;
// console.dir(oDiv.offsetLeft + "，" + oDiv.offsetTop)
if (e.clientY <= 0 && e.clientX > 0) {
oDiv.style.left = e.clientX - yw + "px";
oDiv.style.top = "0px";
} else if (e.clientY > 0 && e.clientX <= 0) {
oDiv.style.left = "0px";
oDiv.style.top = e.clientY - xw + "px";
} else {
oDiv.style.left = e.clientX - yw + "px";
oDiv.style.top = e.clientY - xw + "px";
}
};
}
document.onmouseup = function (event) {
e = event || ev;
// console.dir("up:" + oDiv.offsetLeft + "，" + oDiv.offsetTop + "---xw:" + xw + ",xy:" + yw)
// console.log("s_left:" + oDiv.style.left + ",s_top:" + oDiv.style.top);
// oDiv.style.left = oDiv.style.left > 0 ? oDiv.style.left : 0;
// oDiv.style.top = oDiv.style.top > 0 ? oDiv.style.top : 0;
document.onmousemove = null;
};
</script>
</body>
</html>
