簡易拖拽以及bug的修復

2021-07-23 15:32:55 字數 902 閱讀 1899

1、拖拽的實現

我們將實現乙個盒子在螢幕視窗隨著滑鼠按下跟隨者滑鼠指標移到,當滑鼠鬆開將會靜止不動;若再按下又可移動盒子。我們先準備盒子,**如下:

js**:

2、修復bug

在上面我們已經可以把盒子進行拖動了,但是有沒有發現盒子拖動之後就一直跟著指標移動,停不下來了,我們來處理下這個問題。

obox.οnmοuseup=function  () ;

我們在後面加了乙個函式,就是在滑鼠拖動之後將前面的兩個函式置為null,那麼就不會在滑鼠鬆開之後在隨著滑鼠移動了。但是又有乙個問題就是只能移動一次,像再次拖動盒子就不能了,是因為我們已經把前面兩個事件都已經取消了,所以移動不了了,我們在改改,將下面有[1]後面的obox改了,改為document。

改好之後就可以正常的移動盒子了。但是有時候我們滑鼠不避免會移動得很快,那問題就又出現了,當滑鼠指標移到過快,盒子就會脫離指標,可以說成盒子移動的速度跟不上指標移動的速度,為什麼會造成這個現象呢?我們可以想象我們現在要拖動盒子,但是滑鼠指標的作用域就在盒子上面,如果我們把作用域變大,那麼就是不是可以解決問題了。那就需要把上面有[2]的兩個物件元素obox也改為document,現在就可以實現盒子的拖動了。

現在我們就可以很好的移動盒子了,但是在往下拖動的時候,就有乙個不美觀的狀態了,因為螢幕往下移動了,滑鼠指標的引數超過了第一屏的大小了,所以就有不美觀,那我們可以把盒子能移動得範圍定在可視區域範圍內,改變的**如下:

在上面新增

return false,處理某些瀏覽器的相容性問題。

ionic ios打包配置以及bug修復整理

一,ios打包配置 1.狀態列重疊 第一次打包發現狀態列重疊,網上搜尋的原生 無效。最後通過在config.xml裡設定實現。重要 第二次打包發現頂部好了.但是header下面有一段margin,找到ionic.css 9600 行 全部注釋。platform ios.platform cordov...

UE4 簡易AI 玩家死亡動畫bug修復

之前的死亡黑屏一下就黑了,改一下加個漸變 在ui裡面做乙個漸變的動畫 還有乙個,當我們死了之後還能聽見ai在攻擊我們,這點也要改一下 其實就是加乙個判斷,如果目標角色的hp 0,才繼續攻擊。然後還有乙個bug.當ai死了之後,躺在了地上,他還是有出拳打玩家的動作,這也要加乙個判斷 相對的,玩家死後也...

簡易而又靈活的Javascript拖拽框架(三)

一 開篇 這是這個拖拽系列的第三篇了,第一篇 簡單的介紹了一下這個拖拽框架,第二篇 用這個框架做了乙個tab標籤的拖放。這次用這個拖拽框架做乙個更複雜一點的效果 跨列拖放。就像igoogle和netvibes的個性頁面布局那樣。code utility function findposx obj e...