1

ユーザーが入力時に提案を生成するテキスト ボックスにユーザーが入力する機能を作成しようとしています (Google インスタントのように)。その後、それらの提案をページのボックスにドラッグできます。タッチ スクリーン モバイル デバイスが HTML 5 のドロップ アンド ドラッグで動作しないことを発見するまで、すべて正常に動作していました。代わりにjqueryで動作させようとしていますが、スムーズに進んでいません。

以下のコードは、ドラッグ可能な画像を表示し、タッチ スクリーンとマウスで動作します。

<script type='text/javascript' src='js/head.min.js'></script>
        <link rel='stylesheet' type='text/css' href='css/style.css' />
<script>
head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js','js/ui.js','js/touch.js', function (){
   $('#touchme1').draggable({revert:true});
$('#drop').droppable({
    drop: function( event, ui ) {
        $(ui.draggable).remove();
        $(this).css({'border':'#777 dashed 3px','background':'#eee'});
    },
    over: function(event, ui) {
        $(this).css({'border':'#a33 dashed 3px','background':'#faa'});
    },
    out: function (event, ui){
        $(this).css({'border':'#777 dashed 3px','background':'#eee'});
    }
});
});
</script>
<img src='itemimages/75.jpg' id='touchme1' class='touchBox'>

問題は、検索結果を表示するために呼び出される php ファイル内で同じコードが使用されている場合、モバイル デバイスではドラッグ アンド ドロップが機能しないことです (ただし、デスクトップでは機能します)。

4

1 に答える 1

1

#touch1 要素にイベント ハンドラーを追加する必要があるかもしれないと感じています。投稿したコードは、DOM に既に存在する #touch1 要素のみを検索しますが、要素は AJAX を介して読み込まれるため、ページが最初に読み込まれるときに DOM にはありません。

を使用.on()して、イベント ハンドラーをオブジェクトにアタッチできます。

$(document).on('mouseover', '#touchme1', function(){
    $(this).draggable({revert:true});
});

上記の例では、mouseoverイベントを使用しています。ただし、タッチ デバイスとマウスの両方で機能するイベント ハンドラを選択する必要があります。

jsbin の例: http://jsbin.com/agisom/2/edit

于 2012-09-03T08:34:00.553 に答える