<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #big { height: 800px; width: 800px; background-color: #00 ...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#big {
height: 800px;
width: 800px;
background-color: #008000;
position: relative;
}
#small {
height: 100px;
width: 100px;
background-color: orangered;
position: absolute;
}
</style>
</head>
<body>
<div id="big">
拖拽有內容的div，在瀏覽器上都會有bug 解決FF和chrome上的bug只需要加上return false就可以了 解決低版本IE上的bug就需要用到事件捕獲setCapture和釋放捕獲releaseCapture() 為瞭解決相容問題就需要做一個判斷，需要兩套代碼
<div id="small">
解決FF和chrome上的bug只需要加上return false就可以了
</div>
</div>
</body>
<script type="text/javascript">
//拖拽有內容的div，在瀏覽器上都會有bug
//解決FF和chrome上的bug只需要加上return false就可以了
//解決低版本IE上的bug就需要用到事件捕獲setCapture和釋放捕獲releaseCapture()
//為瞭解決相容問題就需要做一個判斷，需要兩套代碼
var big = document.getElementById("big");
var small = document.getElementById("small");
//滑鼠按下的函數
var x = 0;
var y = 0;
small.onmousedown = function(ev) {
var oEvent = ev || event;
x = oEvent.clientX - small.offsetLeft;
y = oEvent.clientY - small.offsetTop;
if(small.setCapture) { //在IE下
//滑鼠移動的函數
small.onmousemove = mouseMove;
//滑鼠抬起的函數
small.onmouseup = mouseUp;
//解決IE下有內容的拖拽情況下的bug
//用到捕獲
small.setCapture();
} else { //在火狐下
//滑鼠移動的函數
document.onmousemove = mouseMove;
//滑鼠抬起的函數
document.onmouseup = mouseUp;
//return false可以解決有內容的拖拽情況下的bug
//但是對IE不適用
return false;
}
}
//定義一個滑鼠移動的函數
function mouseMove(ev) {
var oEvent = ev || event;
var L = oEvent.clientX - x;
var T = oEvent.clientY - y;
//保證small不被拖出大框，並且實現磁性吸附的效果
if(L < 100) {
L = 0;
} else if(L > big.offsetWidth - small.offsetWidth) {
L = big.offsetWidth - small.offsetWidth;
}
if(T < 100) {
T = 0;
} else if(T > big.offsetHeight - small.offsetHeight) {
T = big.offsetHeight - small.offsetHeight;
}
small.style.left = L + "px";
small.style.top = T + "px";
}
//定義一個滑鼠抬起的函數
function mouseUp(ev) {
this.onmousemove = null;
this.onmouseup = null;
//釋放捕獲,只在IE下適用，所以要做一個判斷
if(this.releaseCapture) {
this.releaseCapture();
}
}
</script>
</html>
