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

2022-03-20 19:01:36 字數 1657 閱讀 4526

使用 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 方法裡。
2.js**

<

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...