PhoneGapアプリケーションでドラッグ&ドロップベースのメニューを作成する際に問題が発生しました。私はいくつかのプラグインを試しました。 jquery.mobiledraganddrop.js(http://www.stevefenton.co.uk/Content/Jquery-Mobile-Drag-And-Drop/)は動作しませんでした。jqueryで「touch」イベントを使用してこの機能を自分自身で作成しようとしましたモバイル(アニメーションはスムーズではありませんでした)。それらのどれも、私のために十分ではありませんでした。AndroidでPhoneGapとpep.jquery.jsを使用してドラッグアンドドロップする
最終的に私はpep.jquery.js(http://pep.briangonzalez.org/)プラグインを見つけましたが、これは完璧と思われましたが、後で説明するいくつかの問題が発生しました。
以下に示すコードの背後にあるアイデアは、メニュー項目が円の周りに均一に配置されたトークンとして表示されることです。円の中心にトークンがドロップされるたびに、メニューオプションが選択されます。タッチイベントが終了したときにトークンが円の中心に十分に近くない場合、トークンは元の位置に戻されます。 PC上で作品をドラッグするが、私はトークンをドラッグ停止したときに、すべてのませ仕事がのAndroid電話で、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を使ってドラッグアンドドロップを処理する方法を別のアイデアで教えていただければ、とても嬉しく思います。