本文介紹了如何

Fidget jQuery插件可用于輕松使用Mobile WebKit中的Touch事件來檢測各種手勢。 您將構建一個非常簡單的界面，使講師只需拖動即可將學生分為2個不同的組。

由于iPad之類的設備處理傳統鼠標事件的方式，最好改用可用的Touch事件，并且Fidget簡化了可能變得非常復雜的過程。

首先下載附件，然后瀏覽其內容。 此演示在iPad（適用于大小）上效果最佳，但應在其他Mobile WebKit瀏覽器上工作。 可以測試每個代碼塊，并在達到本教程結尾之前提供結果。

項目文件夾包含HTML頁面，用于為其設置樣式的CSS文件，jQuery，Fidget插件和students.js，用于您自己的代碼。

在iPad上查看HTML，您將看到3個框，其中一個綠色填充有學生姓名，另外2個用于A組和B組學生。在本教程中，您將使用Fidget構建一個界面，允許講師將其學生分組為通過拖動兩個組。

打開空白的students.js文件，并添加以下代碼：

$(document).ready(function()?{$('.student').fidget({dragThis:?true}); });

頁面加載完成后，此代碼將查找具有學生類別的每個HTML元素

并在用戶拖動時自動在頁面上移動它。

您將能夠移動學生，但他們只會留在您離開他們的地方。 我們需要知道何時將它們放入一個組中。

現在，使用粗體代碼更新students.js：

$(document).ready(function()?{$('.student').fidget({dragThis:?true,swipe:?dragStudent}); });?? function?dragStudent(event,?fidget)?{? $(this).css('pointerEvents',?'none');? var?hoveredElement?=document.elementFromPoint(fidget.currentFingers[0].pageX,fidget.currentFingers[0].pageY);? if?(fidget.swipe.status?==?'move')?{if?((hoveredElement.id?==?'groupA')?||?(hoveredElement.id?==?'groupB'))?{$(hoveredElement).addClass('hover');}????? }? $(this).css('pointerEvents',?'auto');? }

保存此文件并在iPad上刷新頁面。 現在，當學生被拖到一組中時，通過將班級懸停添加到該組中，陰影將突出顯示該組。

用粗體代碼修改該功能，以在手指不再位于組上方時刪除陰影：

function?dragStudent(event,?fidget)?{? $(this).css('pointerEvents',?'none');? var?hoveredElement?=document.elementFromPoint(fidget.currentFingers[0].pageX,fidget.currentFingers[0].pageY);? if?(fidget.swipe.status?==?'move')?{if?((hoveredElement.id?==?'groupA')?||?(hoveredElement.id?==?'groupB'))?{$(hoveredElement).addClass('hover');}?else?{$('#groupA,?#groupB').removeClass('hover');} }? $(this).css('pointerEvents',?'auto');? }

現在，手指不在兩個組中的任何一個之上，將懸停類移除。

這是您之前提供給Fidget的“ dragStudent”函數，它帶有2個稱為event和fidget的參數。 煩躁是具有屬性的對象，可為我們提供有關用戶當前手勢的信息。

hoveredElement變量用于基于屏幕上第一根手指的x和y坐標來查找手指當前拖動的框。 該手指是fidget.currentFingers [0]，是任何時候屏幕上所有手指的數組。 “零”手指從數組中取出，因為這是第一個觸摸屏幕的手指。 pageX和pageY屬性給出該手指的坐標。

代碼中的if語句使用fidget.swipe.status屬性檢查屏幕上的手指自啟動以來是否已移動。

第二條if語句檢查手指是否在ID為#groupA和#groupB的<div>上。 如果手指在，則將懸停類別添加到該組。 您會注意到，當您將一個學生拖到一個組上時，會出現一個陰影，它來自懸停類。

當手指不在兩個組中的任何一個上方時，else語句用于刪除陰影（通過刪除懸停類）。

現在，我們需要添加以下代碼，以檢測用戶何時放開了學生以及應將其放置在何處。 用黑體代碼修改dragStudent函數：

function?dragStudent(event,?fidget)?{? $(this).css('pointerEvents',?'none');? var?hoveredElement?=document.elementFromPoint(fidget.currentFingers[0].pageX,fidget.currentFingers[0].pageY);? if?(fidget.swipe.status?==?'move')?{if?((hoveredElement.id?==?'groupA')?||?(hoveredElement.id?==?'groupB'))?{$(hoveredElement).addClass('hover');}?else?{$('#groupA,?#groupB').removeClass('hover');}???? }? if?(fidget.swipe.status?==?'end')?{if?((hoveredElement.id?==?'groupA')?||?(hoveredElement.id?==?'groupB'))?{$(hoveredElement).append(this);$(hoveredElement).removeClass('hover');}?else?{$('#students').append(this);$(this).fidget({dragThis:?true,swipe:?dragStudent});}$(this).css('top',?0);$(this).css('left',?0); }? $(this).css('pointerEvents',?'auto');? }?刷新iPad上的頁面，您現在應該可以將學生拖放到任一組中，在各組之間，然后返回到主要學生列表。

該代碼使用另一個具有相同fidget.swipe.status屬性的if語句，但是這次檢查其何時“結束”，即何時手指離開屏幕以放置學生姓名。

同樣，另一個if語句檢查是否將學生放在了組A或B上，并使用jQuery append方法將學生HTML元素移到該組中。 懸停類再次從此處刪除。

當未將學生放到A組或B組中時，else語句將運行。在這種情況下，該學生將返回到主要學生列表，而不是留在頁面上的任何位置。

您會注意到，只能將2個學生添加到一個組中，而名稱不會在下面消失。 為了解決這個問題，我們可以使用Fidget來檢測2指捏手勢，并使用該手勢來更改組的大小。 用粗體代碼修改students.js的第一部分：

$(document).ready(function()?{$('.student').fidget({dragThis:?true,swipe:?dragStudent});?$('#groupA,?#groupB').fidget({pinch:?function?resize(event,?fidget)?{$(this).css('height',?fidget.pinch.height?+?'px');}}); });

這將使用#groupA和#groupB的HTML元素，并告訴Fidget在這些匹配的元素上發生收縮事件時調用resize函數。

現在，刷新頁面時，您應該可以將兩個手指放在一組中，然后向外捏以增大尺寸，或者向內捏以減小尺寸。

我們只對移動的Y方向感興趣，因為我們想更改組的高度，而不是組的寬度。

this關鍵字是pinch事件定位的HTML元素。

我正在尋找反饋

我目前正在為我的大學榮譽項目開發Fidget，可以提供的任何反饋（正面和負面）都將不勝感激。

訪問我的網站以獲取更多信息... 附加的文件

fidget.zip （38.3 KB，154視圖）

From: https://bytes.com/topic/javascript/insights/932517-build-multi-touch-interface-fidget-jquery-plugin

總結

以上是生活随笔為你收集整理的使用Fidget jQuery插件构建多点触控界面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。