共计 1494 个字符，预计需要花费 4 分钟才能阅读完成。
1、先写一个能够滚动的内容
<head>
<style>
#container {
width: 400px;
height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
}
.line {
width: 360px;
height: 40px;
margin: 24px;
background: #0082cc;
}
</style>
</head>
<body>
<div id="container">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</body>2、定义框选无效区
var selectContainer = document.getElementById('container'); // 选框无效区3、鼠标按下时，进入一个总的办法
selectContainer.onmousedown = function () {alert(2222222); // 测试在无效区内，鼠标按下响应的事件
}4、欠缺鼠标按下的第一个执行操作：在容器里新增加一个方形 div
selectContainer.onmousedown = function (e) {var selection = document.createElement('div');
selection.style.cssText="width: 100px; height: 100px; background: lightblue; opacity: 0.4";
document.getElementById('container').appendChild(selection);
}这个浅蓝色的方块就是咱们用鼠标拖动能够管制的 框选框。然而框选框的起始地位(x,y)，咱们要绝对于外框相对定位。所以，代码进一步写成：
#container {
width: 400px;
height: 300px;
overflow-y: auto;
position: relative;
border: 1px solid #ddd;
}selection.style.cssText="width: 100px; height: 100px; background: lightblue; opacity: 0.4; position: absolute";并且此时咱们要申明两个变量：程度偏移地位，垂直偏移地位
<script>
var startX = 0;
var startY = 0;selectContainer.onmousedown = function (e) {
startX = e.clientX;
startY = e.clientY;失去了鼠标点击的地位后，咱们试着把浅蓝色方块定位到这里。
selection.style.left = startX;
selection.style.top = startY;咱们当初失去了鼠标点击的定位点，接下来就要找到鼠标拖动的方块的横纵坐标范畴。
5、找方块的范畴
首先，咱们的方块范畴是通过鼠标挪动的多少来决定的，所以咱们要写一个鼠标按下后的挪动事件：
selectContainer.onmousemove = function (e) {alert("挪动了！");
}（未完待续 …）
正文完
