web-dev-qa-db-ja.com

jQuery-iPad / iPhoneでドラッグ可能な画像-event.preventDefault（）;を統合する方法？

私は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はどこで入手できますか？

宜しくお願いします。

jqueryhtmljquery-uimulti-touchjquery-mobile
15
Tim

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

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>
23
JE42

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

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

5
Tim

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

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

3
thatmiddleway

こんな感じだと思います

$(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();
        });
    });
3
naugtur

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 ] );
        }
    });
0
Developer IT