使用Fidget jQuery插件构建多点触控界面

最新推荐文章于 2024-09-13 08:33:26 发布

cxygs5788

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量185

点赞数

文章标签： javascript ViewUI

本文介绍了如何

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，可以提供的任何反馈（正面和负面）都将不胜感激。

访问我的网站以获取更多信息...

附加的文件