使用JS製作乙個滑鼠可拖的DIV（一） 滑鼠拖動

使用 js 來實現乙個可拖動的div，主要是使用到以下幾個事件：

1.滑鼠按下：div元素的onmousedown。

2.滑鼠按住拖動：document 的 onmousemove 元素。

3.滑鼠放開：document 的 onmouseup 元素。

1.當使用點選要拖動的 div 時，要首先計算出滑鼠的位置與元素位置的差值：

1.1.x座標的差值 = 滑鼠當前位置的x座標 - div元素的x座標（即：左偏移量）

1.2.y座標的差值 = 滑鼠當前位置的y座標 - div元素的y座標（即：上偏移量）

2.繫結 document.onmousemove 事件並改變 div 元素的位置。

將 div 元素的 position 設定成：absolute。讓元素可以改變位置。

div 元素的x座標 = 滑鼠當前位置的x座標 - x座標的差值

div 元素的y座標 = 滑鼠當前位置的y座標 - y座標的差值

3.繫結 document.onmouseup 事件。

當滑鼠放開的時候，清除繫結 document.onmousemove 事件

1.html **：

<

style
>
#drag 
style
>
<
div 
id="drag"
onmousedown
="movebind(this, event)"
>1
div>
div>
<
br />拖放狀態：<
span 
id="idshow"
>未開始
span
>

onmousedown="movebind(this, event)" 這裡是繫結滑鼠按下事件，並將當前元素物件與事件資訊傳入 movebind 方法裡。

<

script
>
function
movebind(obj, evnt) 
document.onmouseup 
=function
()         };
}script
>

其中：

//獲得元素座標。

var left = obj.offsetleft;
var top = obj.offsettop;
var width = obj.offsetwidth;
var height = obj.offsetheight;

這裡分別獲得元素的 x 座標， y 座標，寬度，高度。

//計算出滑鼠的位置與元素位置的差值。

var cleft = evnt.clientx - left;
var ctop = evnt.clienty - top;

evnt.clientx 和 evnt.clienty 獲取到的是滑鼠的位置。

obj.style.left = moveleft + "px";

這裡就是直接修改元素的 x 座標。

其它的**都如同上面思路所寫的這裡就不一一說明了。

使用JS製作乙個滑鼠可拖的DIV 滑鼠拖動

使用 js 來實現乙個可拖動的div，主要是使用到以下幾個事件 1.滑鼠按下 div元素的onmousedown。2.滑鼠按住拖動 document 的 onmousemove 元素。3.滑鼠放開 document 的 onmouseup 元素。1.當使用點選要拖動的 div 時，要首先計算出滑鼠的...

使用js實現滑鼠拖動乙個盒子移動的例項

如下 拖拽移動 因為要拖動，所以父盒子要加定位，但需要注意的是要使用 absolute 定位，使用 relative 定位的話是有問題的 相對於之前的位置定位 分為三個事件 滑鼠按下事件 滑鼠拖動事件 滑鼠抬起事件。當滑鼠按下時獲得滑鼠在父盒子裡面的座標 x,y 滑鼠開始移動的時候用滑鼠移動後的座標...

使用Unity製作乙個時鐘

建立時鐘 讓我們建立乙個新的工程。預設的場景中包含乙個position為 0，1，10 的相機。在相機視口中可以看到場景的一部分，選擇這個相機，然後選擇選單中的 gameobject alignview便能獲得你想看到場景中的某個部分。我們需要一些遊戲物件去代替這個時鐘。選中選單中的gameobje...