js拖拽效果詳細講解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<style>
.calculator {
background:#f00;
position: absolute; /*設置絕對定位，脫離文檔流，便於拖拽*/
display: block;
width: 200px;
height: 200px;
color:#fff;
cursor: move;
left:20px; /*鼠標呈拖拽狀*/
}
</style>
<body>
<div class="calculator">鼠標原來內容</div>
<div class="calculator" id="drag">鼠標拖拽內容</div>
<script>
window.onload = function() {
//拖拽功能(主要是觸發三個事件：onmousedown\onmousemove\onmouseup)
var drag = document.getElementById(‘drag‘);
//點擊某物體時，用drag對象即可，move和up是全局區域，也就是整個文檔通用，應該使用document對象而不是drag對象(否則，采用drag對象時物體只能往右方或下方移動)
drag.onmousedown = function(e) {
var e = e || window.event; //兼容ie瀏覽器
var diffX = e.clientX - drag.offsetLeft; //鼠標點擊物體那一刻相對於物體左側邊框的距離=點擊時的位置相對於瀏覽器最左邊的距離-物體左邊框相對於瀏覽器最左邊的距離
var diffY = e.clientY - drag.offsetTop;
/*低版本ie bug:物體被拖出瀏覽器可是窗口外部時，還會出現滾動條，
解決方法是采用ie瀏覽器獨有的2個方法setCapture()\releaseCapture(),這兩個方法，
可以讓鼠標滑動到瀏覽器外部也可以捕獲到事件，而我們的bug就是當鼠標移出瀏覽器的時候，
限制超過的功能就失效了。用這個方法，即可解決這個問題。註：這兩個方法用於onmousedown和onmouseup中*/
if(typeof drag.setCapture!=‘undefined‘){
drag.setCapture();
}
document.onmousemove = function(e) {
var e = e || window.event; //兼容ie瀏覽器
var left=e.clientX-diffX;
var top=e.clientY-diffY;
//控制拖拽物體的範圍只能在瀏覽器視窗內，不允許出現滾動條
if(left<0){
left=0;
}else if(left >window.innerWidth-drag.offsetWidth){
left = window.innerWidth-drag.offsetWidth;
}
if(top<0){
top=0;
}else if(top >window.innerHeight-drag.offsetHeight){
top = window.innerHeight-drag.offsetHeight;
}
//移動時重新得到物體的距離，解決拖動時出現晃動的現象
drag.style.left = left+ ‘px‘;
drag.style.top = top + ‘px‘;
};
document.onmouseup = function(e) { //當鼠標彈起來的時候不再移動
this.onmousemove = null;
this.onmouseup = null; //預防鼠標彈起來後還會循環（即預防鼠標放上去的時候還會移動）
//修復低版本ie bug
if(typeof drag.releaseCapture!=‘undefined‘){
drag.releaseCapture();
}
};
};
};
</script>
</body>
</html>
js拖拽效果詳細講解