CODEWITHSUNDEEP
javascriptandroidjquery-mobilecordova
iamovie
iamovie

Reputation: 21

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

I'm having an issue creating a drag-and-drop-based menu in a PhoneGap application. I've tried some plugins e.g. jquery.mobiledraganddrop.js (http://www.stevefenton.co.uk/Content/Jquery-Mobile-Drag-And-Drop/) which didn't work and tried to write this functionality myself using "touch" events with jquery mobile (the animation was not smooth though). None of them resulted to be sufficient for my cause.

Eventually I found pep.jquery.js (http://pep.briangonzalez.org/) plugin which seemed to be perfect, however, some issues occured which I will describe later.

The idea behind the code presented below is that menu items are displayed as tokens which are put uniformly around a circle. Whenever the token is dropped in the circle center, the menu option is chosen. If the token is not enough close to the circle center when the touching event ends then it's moved back to its original position.

The problem is that: dragging works on a PC but does NOT work at all on an Android phone, touchend event does not occur when I stop dragging the token (I'm aware of the fact marginLeft and marginTop are set to 0 and that won't result in tokens moving to the original position - I left that for debugging purposes).

$(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++;
    });
}

Any help with this code would be highly appreciated. :) I would also be very glad if you gave me another idea how to handle drag and drop using phonegap other than the methods I described before.

Upvotes: 0

Views: 1017

Answers (1)

briangonzalez
briangonzalez

Reputation: 1616

iamovie,

I created Pep. Which Android device and which browser on that device? Give me a little more info and I will help debug.

If you file an issue here we can track the bug and I'll make sure the issue is cross-referenced here on SO, and we can post a legitimate answer to this question.

Upvotes: 1

Related Questions