博主的前端入門知識是在慕課網學的，當時有個demo，就是在網頁模擬乙個qq面板的拖動效果（如圖，用兩個div代替。。。效果是拖動中間的div，整個div跟著移動），今天來總結記錄一下。
思路是當滑鼠按下時，開始計算元素距離螢幕左邊緣和上邊緣的距離，並同步賦予元素。這裡的關鍵點是對於js中元素與根元素（或者指定父級元素）的距離的運用，即offset。
首先假設外層盒子叫out，中間盒子叫center。當滑鼠在center按下時為out新增事件：
1並且獲取out的當前位置（clientx,clienty）（這裡的參照系是當前視窗，若將瀏覽器視窗縮小，則可移動區域減小），再獲取out距離視窗邊緣的位置座標（offsetleft,offsettop），此處沒有設定參考的父元素，所以以根元素為參照物，即body。function
drag ()
取兩者差值，就是整個div應該變化的座標量。這時將out的座標與變化量相加，就得到了整個div的新座標值。用onmousemove隨時更新div的座標，就得到了拖動的效果。
1為防止盒子移動到視窗外面，需要進行邊緣檢測，由於視窗的座標係以螢幕左上角為原點，所以左邊檢測和上邊檢測只需要看滑鼠的座標—out距離視窗左邊框（或上邊框）的距離是否等於0就行。function
client (eve)
13 document.onmouseup = function
() 17 }
右側檢測需要計算盒子距離左邊緣的距離+盒子本身的寬度是否超過了瀏覽器視窗本身的寬度，瀏覽器本身可見區域的寬度為clientwidth，盒子本身的寬度是out.offsetwidth，這兩者的差就是滑鼠在x方向移動的最大值。當滑鼠移動到最大值時說明盒子已經移動到了右側螢幕邊緣。底部與右側相似。
1function
mov (e, posx, posy)
11if (finalheight <= 0)
14if (finalleft >=diffwidth)
17if (finalheight >=diffheight) //
設定座標，使盒子不超出視窗
20 out.style.left = finalleft + 'px'
21 out.style.top = finalheight + 'px'22}
23 window.onload = drag
pyqt實現乙個按住拖動有效果的按鈕
看到有些部落格上有這種樣式的好看背景彩蛋，因此自己打算用qt去實現一下。這個樣式的實現主要基於控制項的重繪。由於我的 過長，在此我只貼一下核心 def paintevent self,qevent global x,y print 重繪中 x,y 0,0 painter qpainter self ...
使用js實現滑鼠拖動乙個盒子移動的例項
如下 拖拽移動 因為要拖動，所以父盒子要加定位，但需要注意的是要使用 absolute 定位，使用 relative 定位的話是有問題的 相對於之前的位置定位 分為三個事件 滑鼠按下事件 滑鼠拖動事件 滑鼠抬起事件。當滑鼠按下時獲得滑鼠在父盒子裡面的座標 x,y 滑鼠開始移動的時候用滑鼠移動後的座標...
乙個可拖動的ScrollView
我們經常看到這樣的效果,乙個listview和gridview亦或者是recycleview,再上拉或下拉到頂部的時候,還能再拖拽一段距離,這種效果是是非常常見的,因為用的比較多,所以記錄一下.實現思路是自定義乙個scrollview 具體 如下 package fenganoschina.feng...