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

2021-10-23 06:10:35 字數 350 閱讀 8400

**如下

拖拽移動

因為要拖動,所以父盒子要加定位,但需要注意的是要使用 absolute 定位,使用 relative 定位的話是有問題的(相對於之前的位置定位)

分為三個事件 , 滑鼠按下事件、滑鼠拖動事件、滑鼠抬起事件。當滑鼠按下時獲得滑鼠在父盒子裡面的座標(x,y),滑鼠開始移動的時候用滑鼠移動後的座標減去滑鼠在父盒子裡面的座標,把所得的值賦給父盒子的left和top。滑鼠抬起時 移除滑鼠移動事件。

使用-moz-user-select: none;  -webkit-user-select: none; user-select: none;來禁止選中

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

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

模擬乙個盒子的拖動效果

博主的前端入門知識是在慕課網學的,當時有個demo,就是在網頁模擬乙個qq面板的拖動效果 如圖,用兩個div代替。效果是拖動中間的div,整個div跟著移動 今天來總結記錄一下。思路是當滑鼠按下時,開始計算元素距離螢幕左邊緣和上邊緣的距離,並同步賦予元素。這裡的關鍵點是對於js中元素與根元素 或者指...

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

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