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("挪动了！");}（未完待续...）