<script?type="text/javascript">
????var?oDrag?=?document.getElementById('draggable');
????var?isDraging?=?false;
????//?var?lisX?=?0;為什么這里變量不聲明，到用時聲明會出現(xiàn)鼠標按下后會跑到元素左上角
????//?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;
????}
2016-04-20
var 在函數(shù)中聲明的是一個局部變量，如果不帶var直接在函數(shù)中寫變量名的話就是一個全局變量。作用于整個文件。另外鼠標跑到元素的左上角不是在鼠標點擊的時候發(fā)生的，而是在鼠標移動的時候發(fā)生的。那是因為你在點擊事件中聲明了一個局部變量，不能在移動函數(shù)中使用。如果要想使用，直接去掉var，改成全局變量。具體的看一下，變量的作用域就行。
2016-04-20
????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"; ???????????? ????????}