16

私はjQuery、jQuery UI、jQuery mobileを使用して、iPhone/iPad用のWebアプリケーションを構築しています。今、私は画像を作成し、それらはドラッグ可能でなければならないので、私はこれを行いました：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Drag - Test</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    </head> 
    <body>
    <div>
        <div style="width:500px;height:500px;border:1px solid red;">
            <img src="http://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/200px-JQuery_logo.svg.png" class="draggable" alt="jQuery logo" />
            <img src="http://upload.wikimedia.org/wikipedia/en/a/ab/Apple-logo.png" class="draggable" alt="Apple Inc. logo" />
        </div>
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function() {
        $(".draggable").draggable();
    });
</script>
</html>

ここで実際の例を見ることができます：http：//jsbin.com/igena4/

問題は、ページ全体がスクロールしたいということです。AppleのHTML5の例を検索したところ、ページのスクロールを防ぎ、画像をドラッグできるようにするためにこれが見つかりました。

...
onDragStart: function(event) {
    // stop page from panning on iPhone/iPad - we're moving a note, not the page
    event.preventDefault();
    ...
}

しかし、問題は私にとってです。これをjQueryに含めるにはどうすればよいですか？どこで入手できeventますか？

よろしくお願いします。

4

5 に答える 5

24

このライブラリをお試しください

https://github.com/furf/jquery-ui-touch-punch

jQuery UIアプリでタッチイベントを有効にするには、次の簡単な手順に従ってください。

  1. ページにjQueryとjQueryUIを含めます。

    <script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>

  2. jQuery UIの後、最初に使用する前にTouchPunchを含めます。

    jQuery UIのコンポーネントを使用している場合、Touch Punchはその動作を変更するため、jquery.ui.mouse.jsの後にTouchPunchを含める必要があることに注意してください。

    <script src="jquery.ui.touch-punch.min.js"></script>

  3. 3.はありません。jQueryUIを期待どおりに使用し、指で触れるだけで機能することを確認してください。

    <script>$('#widget').draggable();</script>
于 2012-01-15T22:15:17.203 に答える
5

iPadとiPhoneのデスクトップブラウザとiOSSafariで動作するソリューションを見つけました： http ：//code.google.com/p/jquery-ui-for-ipad-and-iphone/

JavaScriptファイルをダウンロードして統合するだけです。それだけです。

于 2011-01-03T13:24:05.360 に答える
3

jQuery1.9がこれを行います。

RCへのリンクは次のとおりです：http：//blog.jqueryui.com/2012/08/jquery-ui-1-9-rc/

于 2011-08-30T18:56:16.243 に答える
3

こんな感じだと思います

$(document).bind("dragstart", function(event, ui){
  event.preventDefault(); 
  //return false;//edited
  });

documentそれが必要なのか、それともただのことなのかわかりません'body'

編集

そのコードサンプルをどこから取得したかはわかりませんが、ドラッグを常にブロックしているようです。これが役立つかどうか試してみてください-バブリングを防ぐ必要があるので、スクロールがドキュメントノードで機能する場合-イベントはそこに到達しないはずです。[まだリンゴでは試せません]

$(document).ready(function() {
        $(".draggable").draggable();
        $('body>div').bind("dragstart", function(event, ui){
        event.stopPropagation();
        });
    });
于 2010-12-20T10:16:24.413 に答える
0

jqueryのドキュメントhttp://jqueryui.com/demos/draggable/#eventsをご覧ください。

他のすべてのjQueryと同様に、ドラッグ可能なメソッドを呼び出すときは、開始イベントのコールバックをフックする必要があります。コールバックを含むオブジェクトを渡すことができるパラメーターは常にあります。startコールバックでpreventDefautを呼び出してみてください。

$( "#draggable" ).draggable({
        start: function(e) {
            e.preventDefault();
            counts[ 0 ]++;
            updateCounterStatus( $start_counter, counts[ 0 ] );
        },
        drag: function() {
            counts[ 1 ]++;
            updateCounterStatus( $drag_counter, counts[ 1 ] );
        },
        stop: function() {
            counts[ 2 ]++;
            updateCounterStatus( $stop_counter, counts[ 2 ] );
        }
    });
于 2010-12-21T16:10:08.307 に答える