javascript
JavaScript中随着鼠标拖拽而移动的块
這里要設置一個div塊，你按住它拖拽，它會隨著你的鼠標走，比如常見的登錄框。
給這個div設置簡單的樣式：
由于div是要跟著鼠標活動的，所以必須把position設置為絕對定位，也就是位置可以改變才行：
<style type="text/css">
#div1{width: 100px; height: 100px; background: red; position: absolute;}
</style>
HTML部分：
<body>
<div id="div1">被拖拽的塊</div>
</body>
?
對這個div進行操作：
由于按下鼠標點在div的那一刻，它里面的某一點的位置與div的距離就是恒定的，才能拖拽。所以，我們可以先求出這個點距離div的兩邊的距離disX和disY。
var disX=0;//鼠標距離div的邊的橫向距離
var disY=0;//鼠標距離div的邊的縱向距離
div移動后：
div的位置變成了鼠標點的位置與點距離div的邊距的差值
也就是left為oEvent.clientX-disX，
top為oEvent.clientY-disY；
設置變量存儲div的坐標：
var l=oEvent.clientX-disX;//div的左坐標
var t=oEvent.clientY-disY;//右坐標
?
當鼠標要把這個div拖拽出可視區之時，我們要阻止：
?
左側要拖拽出去時，也就是div的左邊距要<0了，設置這左邊距為0，就不能跑出左側了。
上邊要出去時，也就是div的top要<0了，設置這上邊距為0，就不能跑出上側了。
右側要出去時，也就是div的左邊距要大于可視區的寬度與div寬度的差了，那設置兩者相等，就無法超出范圍了；超出下端也是同理。
//div要拖出可視區左側時：
if(l<0)
{
l=0;
}
//div要拖出可視區右側時：
//document.documentElement.clientWidth 可視區的寬度
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
//div要拖出可視區上邊時：
if(t<0)
{
t=0;
}
//div要拖出可視區下邊時：
if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
最終得到div的位置：
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
當鼠標松開的時候，div不再跟著跑，也就是設置onmousemove沒有了，才可以。
整個程序如下：
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementById('div1');//獲取這個div
var disX=0;//鼠標距離div的邊的橫向距離
var disY=0;//鼠標距離div的邊的縱向距離
oDiv.οnmοusedοwn=function(ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=function(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;//div的左坐標
var t=oEvent.clientY-disY;//右坐標
//div要拖出可視區左側時：
if(l<0)
{
l=0;
}
//div要拖出可視區右側時：
//document.documentElement.clientWidth 可視區的寬度
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
//div要拖出可視區上邊時：
if(t<0)
{
t=0;
}
//div要拖出可視區下邊時：
if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.οnmοuseup=function()
{
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
return false;//阻止默認事件?
};
};
</script>
轉載于:https://www.cnblogs.com/believerp/p/6875344.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的JavaScript中随着鼠标拖拽而移动的块的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： this关键字详解
- 下一篇： Spring3+ibatis (SQL