<script type="text/javascript">
var oDrag = document.getElementById('draggable');
var isDraging = false;
// var lisX = 0;为什么这里变量不声明，到用时声明会出现鼠标按下后会跑到元素左上角
// var lisY = 0;
oDrag.addEventListener('mousedown',function(e){
//鼠标事件1 - 在标题栏按下（要计算鼠标相对拖拽元素的左上角的坐标 ，并且标记元素为可拖动）
e=e||window.event;
isDraging=true;
var lisX=e.pageX-oDrag.offsetLeft;//就是这里前边声明var
var lisY=e.pageY-oDrag.offsetTop;
})
document.onmouseup = function(e){
//鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动）
isDraging=false;
}var 在函数中声明的是一个局部变量，如果不带var直接在函数中写变量名的话就是一个全局变量。作用于整个文件。另外鼠标跑到元素的左上角不是在鼠标点击的时候发生的，而是在鼠标移动的时候发生的。那是因为你在点击事件中声明了一个局部变量，不能在移动函数中使用。如果要想使用，直接去掉var，改成全局变量。具体的看一下，变量的作用域就行。
var oDrag = document.getElementById('draggable');
var isDraging = false;
// var startX = 0;
// var startY = 0;
oDrag.addEventListener('mousedown',function(e){
//鼠标事件1 - 在标题栏按下（要计算鼠标相对拖拽元素的左上角的坐标 ，并且标记元素为可拖动）
startX=e.pageX-oDrag.offsetLeft;
startY=e.pageY-oDrag.offsetTop;
isDraging=true;
})
document.onmouseup = function(e){
//鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动）
isDraging=false;
}
document.onmousemove = function(e) {
//鼠标事件2 - 鼠标移动时（要检测，元素是否标记为移动）
var mouseX=e.pageX;
var mouseY=e.pageY;
var moveX=0;
var moveY=0;
if(isDraging===true){
moveX=mouseX-startX; //这个地方使用了
moveY=mouseY-startY;
moveX=Math.max(0,Math.min(document.documentElement.clientWidth-oDrag.offsetWidth,moveX));
moveY=Math.max(0,Math.min(document.documentElement.clientHeight-oDrag.offsetHeight,moveY));
oDrag.style.left=moveX+"px";
oDrag.style.top=moveY+"px";
}