在Android上使用PhoneGap和pep.jquery.js拖放

Drag and drop with PhoneGap and pep.jquery.js on Android

本文关键字:pep jquery js 拖放 PhoneGap Android      更新时间:2023-09-26

我在PhoneGap应用程序中创建基于拖放的菜单时遇到问题。我尝试了一些插件,例如jquery.mobiledraganddrop.js(http://www.stevefenton.co.uk/Content/Jquery-Mobile-Drag-And-Drop/(,它不起作用,并尝试使用jquery移动的"触摸"事件自己编写此功能(虽然动画不流畅(。他们都没有结果足以满足我的事业。

最终我找到了 pep.jquery.js(http://pep.briangonzalez.org/(插件,它似乎是完美的,但是,发生了一些问题,我将在后面描述。

下面介绍的代码背后的想法是,菜单项显示为标记,这些标记均匀地放在一个圆圈周围。每当将令牌放在圆圈中心时,都会选择菜单选项。如果触摸事件结束时令牌离圆心不够近,则会将其移回其原始位置。

问题是:拖动在 PC 上有效,但在 Android 手机上根本不起作用,当我停止拖动令牌时不会发生触摸事件(我知道 marginLeft 和 marginTop 设置为 0,这不会导致令牌移动到原始位置 - 我出于调试目的保留了它(。

$(document).ready(function(){
    var centerX = 240;
    var centerY = 440;
    var radius = 180;
    var internalRadius = 86;    
    var tokenNumber = $("#circle .token").length;
    reloadTokens(tokenNumber, radius, 0);
    $(".token").pep({
        cssEaseDuration: 0,
        activeClass: "activeToken"
    });
    $("#token").bind("touchend",function(){
        $(this).forceStop();
        $(this).animate({
            marginLeft: 0,
            marginTop: 0
        }, "fast", "easein");
    });
});
function reloadTokens(tokenNumber, radius, additionalOffset){
    var degreeOffset = 60;
    var i = 0;
    $(".token").each(function(){
        degree = (i * (360/tokenNumber) - degreeOffset + additionalOffset) % 360;
        var tokenX = radius * Math.cos(degree * (Math.PI / 180)) + radius;
        var tokenY = radius * Math.sin(degree * (Math.PI / 180)) + radius;
        $(this).css({
            marginLeft: tokenX,
            marginTop: tokenY
        });
        i++;
    });
}
对此

代码的任何帮助将不胜感激。 :)如果您给我另一个想法,除了我之前描述的方法之外,我还很高兴如何使用phonegap处理拖放。

iamovie,

我创造了佩普。哪个安卓设备以及该设备上的哪个浏览器?给我更多的信息,我会帮助调试。

如果您在此处提交问题,我们可以跟踪该错误,我将确保该问题在SO上交叉引用,并且我们可以发布此问题的合法答案。