BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] jQuery UI の 'draggable()' div をタッチスクリーン用にドラッグ可能にするにはどうしたらいいですか？

2022-09-21 04:34:31

質問

私はjQuery UI draggable() をFirefoxとChromeで動作させています。ユーザーインターフェースのコンセプトは、基本的にクリックで "post-it" タイプのアイテムを作成することです。

基本的には、クリックまたはタップで div#everything (縦横100%)をクリックすると、クリックを感知して、入力用のテキストエリアが表示されます。テキストを追加し、終了すると保存されます。この要素はドラッグして移動することができます。通常のブラウザではうまくいっているのですが、私がテストしたiPadでは、アイテムをドラッグして移動することができません。タッチして選択すると（その後少し薄暗くなる）、その後ドラッグができない。左右へのドラッグも全くできません。I ができます。 上下にドラッグすることはできますが、個々の div をドラッグしているのではなく、ウェブページ全体をドラッグしているのです。

これが、クリックをキャプチャするために使用しているコードです。 

$('#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);
});

そしてこれが、ノートを保存し、input 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 で何か間違ったことをしているのか、またはタッチスクリーン UI で動作するクロスプラットフォーム/後方互換の draggable() 要素を行うためのより良いフレームワークがあるのかどうか疑問に思っています。

このような UI コンポーネントの書き方に関するより一般的なコメントも歓迎されます。

ありがとうございます。

UPDATEです。 私は単に私のjQuery UIにこれをチェーンすることができました。 draggable() を呼び出すと、iPadで正しいドラッグができるようになりました。 

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

この jQuery Touch プラグイン がうまくいきました!

どのように解決するのですか？

何時間も無駄にした挙句に、こんなものに出会ってしまいました。

jquery-ui-touch-punch

タップイベントをクリックイベントとして変換します。 jqueryの後にスクリプトを読み込むことを忘れないでください。

iPadとiPhoneで動作するようにしました。 

$('#movable').draggable({containment: "parent"});

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します