Question

我在PhoneGap应用程序中创建基于拖放的菜单时遇到问题。我试过一些插件，例如jquery.mobiledraganddrop.js（http://www.stevefenton.co.uk/Content/Jquery-Mobile-Drag-And-Drop/）哪些无法正常工作并尝试使用jquery的“touch”事件自行编写此功能移动（虽然动画不顺畅）。这些都不足以促成我的事业。

最终我发现pep.jquery.js（http://pep.briangonzalez.org/）插件似乎很完美，但是，我将在稍后描述一些问题。

下面介绍的代码背后的想法是菜单项显示为围绕圆形均匀放置的标记。只要令牌掉落在圆心中，就会选择菜单选项。如果在触摸事件结束时令牌靠近圆心不够，那么它会移回原来的位置。

问题在于：拖动适用于PC，但在 Android 手机上 NOT 完全无效， touchend 事件不会发生当我停止拖动令牌时（我知道事实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处理拖放操作，我也会很高兴。

Answer 1

iamovie，

我创造了Pep。哪个Android设备和该设备上的哪个浏览器？给我一些信息，我会帮助调试。

如果您提出问题here，我们可以跟踪错误，并确保此问题在此处交叉引用，我们可以发布此问题的合理答案。

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

1 个答案: