0

私のモバイル アプリでは、緑色の画像を Web ページ上で移動する必要があります。緑色の画像が送信ボタンの上に置かれると、ボタンに「送信しますか?」と表示され、ユーザーが緑色の画像を送信ボタンにドロップすると、ボタンがオレンジ色に変わります。

写真は次のとおりです。

最初の写真は、ユーザーが緑色の画像をドロップしたときのものです

2番目は、緑色の画像がボタンの上に置かれたとき、ボタンが何を表示するかを示しています

問題は、緑色の画像がボタンの上にあるとき、ボタンは変更できず、ボタンに触れたときにのみ変更できることです。hover() および mouseover() メソッドを試しましたが、すべて機能しませんでした。それはjQuery Mobileです。私の PC バージョンでは、すべてが非常にうまく機能しましたが、モバイル アプリは異なります。

では、緑色の画像がボタンの上にあるときに「送信しますか?」と表示されるようにするにはどうすればよいですか? または、緑色の画像がそれらの 1 つの上にあるときに、オブジェクトが [はい] または [いいえ] ボタンであることを検出する方法はありますか?

コードは次のとおりです。ドラッグ アンド ドロップ メソッドは別の JS ファイルからのものですが、この質問には影響しません。

id = "html";
    $(id).ready(function (e) {

$('.yes').bind('mouseover', function( event, ui ){
    $('.yes').attr("src","images/submit_confirm.png");
    $('input[name=stimulusResponse]').val("yes");
    $('.no').attr("src","images/no.png");
});
$('.no').mouseover(function( event, ui ){
    $('.no').attr("src","images/submit_confirm.png");
    $('input[name=stimulusResponse]').val("no");
    $('.yes').attr("src","images/yes.png");
});

$('.bottomGoButton').drag(function( ev, dd ){
    $( this ).css({
        top: dd.offsetY,
        left: dd.offsetX
    });
    $(this).bind('vmousemove', function(event) {
        $('input[name=test]').val(event.pageX + ", " + event.pageY + $('input[name=test]').val());
    });
});

$('.no').drop(function(){
     $('input[name=stimulusResponse]').val("no");
     $('.no').attr("src","images/submitted_no.png");         
});

$('.yes').drop(function(){
     $('input[name=stimulusResponse]').val("yes");
     $('.yes').attr("src","images/submitted_yes.png");       
});

});

4

1 に答える 1

1

ボタンの位置とマウスを使用して各操作を行うことで、この問題を自分で解決しました。これにより、柔軟性が向上しました。

コードの一部を次に示します。 1. これは、上、左、右、下の引数を取得する方法です。

var yesPosition = $('.yes').position(), noPosition = $('.no').position(),
                yesWidth = $('.yes').width(), yesHeight = $('.yes').height(),
                noWidth = $('.no').width(), noHeight = $('.no').height();
            //get the relative position of yes/no button
            var yesTop = yesPosition.top, yesLeft = yesPosition.left, 
                yesBottom = yesTop + yesHeight, yesRight = yesLeft + yesWidth,
                noTop = noPosition.top, noLeft = noPosition.left,
                noBottom = noTop + noHeight, noRight = noLeft + noWidth;

/ 2. これは hover() メソッドの置き換えです。マウスが動いていて、ボタンの 1 つの範囲内にある場合にのみ、必要な操作を実行できます。かなりクールですね :) /

if(isMouseUp == false && event.pageX >= yesLeft && event.pageX <= yesRight && event.pageY >= yesTop && event.pageY <= yesBottom) {
                            $('input[name=test]').val("X: " + event.pageX + ", " + event.pageY); 
                            $('.yes').attr("src","images/submit_confirm.png");
                            $('input[name=stimulusResponse]').val("yes hover");
                            $('.no').attr("src","images/no.png");
                        }
                        else if (isMouseUp == false && event.pageX >= noLeft && event.pageX <= noRight && event.pageY >= noTop && event.pageY <= noBottom) {
                            $('input[name=test]').val("X: " + event.pageX + ", " + event.pageY); 
                            $('.no').attr("src","images/submit_confirm.png");
                            $('input[name=stimulusResponse]').val("no hover");
                            $('.yes').attr("src","images/yes.png");
                        }
                        else {
                            $('input[name=stimulusResponse]').val("");
                            $('.yes').attr("src","images/yes.png");
                            $('.no').attr("src","images/no.png");
                        }
于 2013-06-27T07:36:15.737 に答える