ユーザーが入力時に提案を生成するテキスト ボックスにユーザーが入力する機能を作成しようとしています (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 ファイル内で同じコードが使用されている場合、モバイル デバイスではドラッグ アンド ドロップが機能しないことです (ただし、デスクトップでは機能します)。