上一個(gè)小demo,稍后有空會(huì)上傳一個(gè)自己寫的長(zhǎng)圖合成工具叭喜，里面也有這個(gè)小demo的運(yùn)用
function small_down(e) {
var obig = document.getElementById("big");
var osmall = document.getElementById("small");
var e = e || window.event;
/*用于保存小的div拖拽前的坐標(biāo)*/
? ? ? ? osmall.startX = e.clientX - osmall.offsetLeft;
osmall.startY = e.clientY - osmall.offsetTop;
/*鼠標(biāo)的移動(dòng)事件*/
? ? ? ? document.onmousemove = function (e) {
var e = e || window.event;
osmall.style.left = e.clientX - osmall.startX + "px";
osmall.style.top = e.clientY - osmall.startY + "px";
/*對(duì)于大的DIV四個(gè)邊界的判斷*/
? ? ? ? ? ? if (e.clientX - osmall.startX <= 0) {
osmall.style.left = 0 + "px";
}
if (e.clientY - osmall.startY <= 0) {
osmall.style.top = 0 + "px";
}
if (e.clientX - osmall.startX >= 250) {
osmall.style.left = 250 + "px";
}
if (e.clientY - osmall.startY >= 250) {
osmall.style.top = 250 + "px";
}
};
/*鼠標(biāo)的抬起事件,終止拖動(dòng)*/
? ? ? ? document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
}
<div id="big">
?????<div id="small" onmousedown="small_down(event)">
?????</div>
</div>
#big {
margin:100px;
border:1px solid #FF3300;
width:300px;
height:300px;
position:relative;
}
#small {
background:#99CC00;
width:50px;
height:50px;
position:absolute;
cursor:pointer;
}
