angular2 學習筆記 の 移動端開發 ( 手勢 )

refer : 

http://hammerjs.github.io/

https://bevacqua.github.io/dragula/

 

手機 和 PC 在互動體驗上最大的區別是互動工具不同.

PC端,我們用滑鼠 

手機端, 我們用觸屏

滑鼠 vs 觸屏 

滑鼠有 hover 概念, 觸屏沒有.

觸屏能多點 (多種手勢), 滑鼠沒有.

responsive design 解決了視覺上的差異問題,卻沒有解決互動上的差異問題. 

hammerjs 幫我們解決的是滑鼠, 觸屏之前的差異問題.

比如 : 監聽各種手勢, click 的 delay 300ms 問題, touchmove 模擬成 mousemove 事件等等. 

angular 認可 hammerjs, 所以只要你 import hammerjs, 你可以直接這樣寫

<div (tap)="test()" >
  test
</div>

angular 會使用 hammerjs 的方法來繫結 tap 事件. 很方便吧 ?

使用 npm 載入 

  "dependencies": { 
    "hammer-timejs": "^1.1.0",
    "hammer-touchemulator": "0.0.2",
    "hammerjs": "^2.0.8", 
  },
  "devDependencies": { 
    "@types/hammerjs": "^2.0.34", 
  }

在 main.ts 裡 import 就可以啦

import 'hammerjs';
import 'hammer-timejs';
import * as TouchEmulator from 'hammer-touchemulator';
TouchEmulator();

TouchEmulator 是 development 情況下的才使用的.

手機還有一個問題就是在 drag and drop. 原生遊覽器的 drag and drop 在手機端支援的不好. 

很多人會用 touchmove 來模擬. 也就是 hammerjs 裡面的 pan 事件. 

但是具體做法還是挺困難的. 

因為觸屏沒有 hover 概念, 也沒 touchover 事件, 所以當用戶 pan 的時候你並沒有辦法輕易的監聽 dragover 來處理事情. (比如你要做 sorting)

我在網上看了一些人的做法是通過 document.elementFromPoint(x,y) 來獲取交會的節點或則每一次 pan 的時候都通過 service 釋出事件, 然後其它元件監聽, 在依據自己的 element.getBoundingClientRect 的 

position 來確定是否 over 到了 element. 簡單就說就是模擬 dragover 事件. 

如果你有好方法歡迎你留意告訴我哦. 

 

關鍵詞:hammerjs 事件 angular 問題 手勢 import 沒有 滑鼠 touchemulator 手機

相關推薦:

基於 HTML5 OpenLayers3 實現 GIS 電信資源管理系統

Web SCADA 電力接線圖工控組態編輯器

快速開發 HTML5 WebGL 的 3D 斜面拖拽生成模型

Material使用11 核心模組和共享模組、 如何使用@angular/material

Python+Selenium筆記(十四)滑鼠與鍵盤事件

JavaScript原生拖放API入門總結

Angular相關問題

DevExpress TreeList 禁止節點拖動到其他節點上

JavaScript操作DOM的那些坑