web-dev-qa-db-ja.com

jQuery UI 'draggable（）' divをタッチスクリーン用にドラッグ可能にするにはどうすればよいですか？

FirefoxとChromeで動作するjQuery UI draggable()があります。ユーザーインターフェイスの概念は、基本的にクリックして「ポストイット」タイプのアイテムを作成することです。

基本的に、クリックをリッスンするdiv#everything（100％の高さと幅）をクリックまたはタップすると、入力テキストエリアが表示されます。テキストを追加し、完了したら保存します。この要素をドラッグできます。これは通常のブラウザーでは機能しますが、iPadではテストできますが、アイテムをドラッグすることはできません。タッチして選択すると（わずかに暗くなります）、ドラッグできません。左右にまったくドラッグされません。 Ican上下にドラッグしますが、個々のdivをドラッグするのではなく、Webページ全体をドラッグします。

そこで、クリックをキャプチャするために使用するコードを次に示します。

$('#everything').bind('click', function(e){
    var elem = document.createElement('DIV');
    STATE.top = e.pageY;
    STATE.left = e.pageX;
    var e = $(elem).css({
        top: STATE.top,
        left: STATE.left
    }).html('<textarea></textarea>')
    .addClass('instance')
    .bind('click', function(event){
        return false;
    });
    $(this).append(e);
});

そして、ここにノートを「保存」し、入力divを単なる表示divに変換するために使用するコードを示します。

$('textarea').live('mouseleave', function(){
    var val = jQuery.trim($(this).val());
    STATE.content = val;
    if (val == '') {
        $(this).parent().remove();
    } else {
        var div  = $(this).parent();
        div.text(val).css({
            height: '30px'
        });
        STATE.height = 30;
        if ( div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight ) {
            while (div.width() !== div[0].clientWidth || div.height () !== div[0].clientHeight) {
                var h = div.height() + 10;
                STATE.height = h;
                div.css({
                    height: (h) + 'px'
                });     // element just got scrollbars
            }
        }
        STATE.guid = uniqueID()
        div.addClass('savedNote').attr('id', STATE.guid).draggable({
            stop: function() {
                var offset = $(this).offset();
                STATE.guid = $(this).attr('id');
                STATE.top = offset.top;
                STATE.left = offset.left;
                STATE.content = $(this).text();
                STATE.height = $(this).height();
                STATE.save();
            }
        });
        STATE.save();
        $(this).remove();
    }
});

保存したメモのページを読み込むと、次のコードが表示されます。

$('.savedNote').draggable({
    stop: function() {
        STATE.guid = $(this).attr('id');
        var offset = $(this).offset();
        STATE.top = offset.top;
        STATE.left = offset.left;
        STATE.content = $(this).text();
        STATE.height = $(this).height();
        STATE.save();
    }
});

STATEオブジェクトは、ノートの保存を処理します。

オンロード、これはhtml本文全体です：

<body> 
    <div id="everything"></div> 
<div class="instance savedNote" id="iddd1b0969-c634-8876-75a9-b274ff87186b" style="top:134px;left:715px;height:30px;">Whatever dude</div> 
<div class="instance savedNote" id="id8a129f06-7d0c-3cb3-9212-0f38a8445700" style="top:131px;left:347px;height:30px;">Appointment 11:45am</div> 
<div class="instance savedNote" id="ide92e3d13-afe8-79d7-bc03-818d4c7a471f" style="top:144px;left:65px;height:80px;">What do you think of a board where you can add writing as much as possible?</div> 
<div class="instance savedNote" id="idef7fe420-4c19-cfec-36b6-272f1e9b5df5" style="top:301px;left:534px;height:30px;">This was submitted</div> 
<div class="instance savedNote" id="id93b3b56f-5e23-1bd1-ddc1-9be41f1efb44" style="top:390px;left:217px;height:30px;">Hello world from iPad.</div> 

</body>

だから、私の質問は本当にです：iPadでこれをどのように改善することができますか？

私はjQuery UIを設定していません、これがjQuery UIまたはjQueryで間違っているのか、クロスプラットフォーム/後方互換のdraggable（）要素を実行するためのより良いフレームワークがあるのか​​疑問に思っていますタッチスクリーンUIで動作します。

このようなUIコンポーネントの作成方法に関するより一般的なコメントも歓迎します。

ありがとう！

UPDATE：これを単純にjQuery UI draggable()呼び出しにチェーンして、iPadで正しいドラッグ可能性を得ることができました！

.touch({
    animate: false,
    sticky: false,
    dragx: true,
    dragy: true,
    rotate: false,
    resort: true,
    scale: false
});

jQuery Touchプラグイン がうまくいきました！

jqueryjquery-uiipaddraggabletouchscreen
108
artlung

何時間も無駄にした後、私はこれに出会いました！

jquery-ui-touch-punch

タップイベントをクリックイベントとして変換します。 jqueryの後にスクリプトを忘れずにロードしてください。

IPadとiPhoneで動作するようになりました

$('#movable').draggable({containment: "parent"});
134
ctrl-alt-dileep

注意：この回答は2010年に書かれたものであり、テクノロジーは急速に進歩しています。より最近の解決策については、 @ ctrl-alt-dileepの答え をご覧ください。

ニーズに応じて、 jQuery touchプラグイン ;を試してください。例を試すことができます here 。 iPhoneでドラッグしても問題なく動作しますが、jQuery UI Draggableでは動作しません。

または、 this プラグインを試すこともできますが、実際には独自のドラッグ可能な関数を記述する必要があります。

補足として：信じられないかもしれませんが、iPadやiPhoneなどのタッチデバイスが：hover/onmouseover機能を使用するWebサイトとドラッグ可能なコンテンツの両方で問題を引き起こしているという話題が増えていると聞いています。

この基礎となるソリューションに興味がある場合は、3つの新しいJavaScriptイベントを使用します。 ontouchstart、ontouchmove、ontouchend。 Appleは実際にその使用に関する記事を書いています。これは here にあります。簡単な例は here にあります。これらのイベントは、リンクした両方のプラグインで使用されます。

60
vonconrad

このプロジェクトは役立つはずです。jQueryUIをiPadおよびiPhoneで変更せずに動作できるように、タッチイベントをクリックイベントにマップします。既存のプロジェクトにJSを追加するだけです。

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/

24
Steve

jQuery ui 1.9がこれを処理します。プレのデモはこちら：

https://dl.dropbox.com/u/3872624/lab/touch/index.html

Jquery.mouse.ui.jsを取り出して、ロードしているjQuery uiファイルの下に貼り付けてください。これで完了です。ソート可能にも機能します。

このコードはうまく機能していますが、エラーが発生した場合は、jquery.mouse.ui.jsの更新バージョンが次の場所にあります。

Jquery-ui sortableは、AndroidまたはIOSに基づくタッチデバイスでは機能しません

7
thatmiddleway

Githubのこのプロジェクトがあなたのソリューションかもしれません

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

4
boulder_ruby

昨日、同様の問題に苦しんでいました。 jQuery UIのドラッグ可能なものとjQuery Touch Punchを使用する「実用的な」ソリューションが既にありました。ただし、このメソッドを使用すると、一部のAndroidデバイスで奇妙なバグが発生したため、偽のエミュレートメソッドを使用する代わりに、タッチイベントを使用してHTML要素をドラッグ可能にする小さなjQueryプラグインを作成することにしましたマウスイベント。

この結果は jQuery Draggable Touch です。これは、要素をドラッグ可能にするためのシンプルなjQueryプラグインで、タッチイベント（touchstart、touchmove、touchendなど）を使用してタッチデバイスを主なターゲットとします。ブラウザ/デバイスがタッチイベントをサポートしていない場合、マウスイベントを使用するフォールバックがまだあります。

2
heyman

jquery.pep.jsを使用してみてください：

jquery.pep.jsは、DOM要素をドラッグ可能なオブジェクトに変換する軽量のjQueryプラグインです。古いものから新しいものまで、タッチからクリックまで、ほとんどすべてのブラウザーで機能します。 jQuery UIのドラッガブルが満たされていなかったというニーズに応えるために構築しました。これは、タッチデバイスでは動作しなかったためです（ハッカーなし）。

ウェブサイト 、 GitHubリンク

1
martynas