jQuery モバイル ブラウザーにおけるドラッグ アンド ドロップ アクションの難しさの分析_jquery

この記事では、例を使用して、jQuery モバイル ブラウザーでのドラッグ アンド ドロップの難しさを分析します。皆さんの参考に共有してください。詳細は以下の通りです。

当初は、iPhone のように自由にドラッグできるコントロール ボタンをモバイル Web ページに実装したいと考えていましたが、最終的にはすべて無駄であることがわかりました。

ドラッグ アンド ドロップ アクションはモバイル ブラウザーでは一般的ですが、モバイル ブラウザーでドラッグ アンド ドロップできるコンポーネントを実装することは不可能です。

まず、PC の Web ページでドラッグ アンド ドロップ操作がどのように実行されるかを見てみましょう。

まず、クリックするとアクションを実行するボタンがあります。これは、iPhone のコントロール ボタンと同じように、自由にドラッグできます。

上図のようにグレーのレイヤーを書くのは簡単ではありません、

まず、灰色のレイヤーの位置属性を abosulte に変更する必要があります。次に、jquery スクリプトで実装する作業の主なポイントは、クリックとマウスダウン マウスアップ アクションのペアを区別することです。本来は、mousedown、mouseup と同じですが、問題はありません。マウスを一定期間押した後、unbind は cilck アクションへのレイヤーのバインディングを即座にクリアし、mousedown 後のアクションがクリックと無関係であることをシステムに伝えます。次の実際のコードを参照してください。 🎜>

コードをコピー コードは次のとおりです:

 
 
 
 
 
 
 
 
 
 

out

 
 
 
<スクリプトタイプ="text/javascript"> 
$(document).ready(function() {
var タイムアウト ; 
     
    $("#mydiv").mousedown(function(e) {
        /* マウスダウンに相当しますその後すぐに判断し、底使用者がいないまで 1 秒を超えました、判定は長さです */
        $("#mydiv").click(function() {
            $("#mydiv").text("被点击"); 
        }); 
        タイムアウト = setTimeout(function() {
            $("#mydiv").text("长按"); 
            /*以下の句の後に、マウスを使って左ボタンを放ちましたが、クリック動作であると判定されませんでした*/
            $("#mydiv").unbind("click"); 
            $("#mydiv").mousemove(function (e) {
                /*ここはネズミ标拽层層移動の時候、ネズミ标刚好在图層中间*/
                ドキュメント .getElementById("mydiv").style.left = e.pageX-50 "px"; 
                ドキュメント .getElementById("mydiv").style.top = e.pageY-50 "px"; 
            });  
        }, 1000)
    }); 
         
    $("#mydiv").mouseup(function() {
        クリアタイムアウト(タイムアウト); 
        /*这里必须清空マウス移動動作，否则图层会永远绑定マウス移動動作，随伴鼠标移動而移動*/
        $("#mydiv").unbind("mousemove"); 
        $("#mydiv").text("out");     
    });  
         
    $("#mydiv").mouseout(function() {
        クリアタイムアウト(タイムアウト); 
        $("#mydiv").unbind("mousemove"); 
        $("#mydiv").text("out"); 
    }); 
}); 

mouseout イベントを記述する必要がある理由は、以前の記事 [JQuery でボタン長押しトリガーイベントを実装] と同様、ブラウザのバグが黒くなってマウスアップ判定を回避することを防ぐためです。 。
上記はすべての主要な PC ブラウザでテストされており、IE8 と完全に互換性があるため、非常に完璧に見えます。

とても美しいです。

しかし、携帯電話になると大きな問題が発生します。

Google ブラウザの携帯電話デバッグ モードでのみ使用でき、実際のデバイス上で使用する前には使用できません。

モバイルブラウザの jquery のクリックイベントには問題はありませんが、jquery mobile では .on("taphold" に置き換えても、長押しイベントは電話機のシステムの右クリック機能と競合します。 、関数 (){}); イベントまたは上記のマウスダウンに e.preventDefault() を追加します。IE は window.event.preventDefault() を使用します。長押しの機能は次のとおりです。ドラッグの主な機能はmousemoveアクションであり、モバイルブラウザはmousemove()アクションをまったくサポートしていないため、ドラッグについて考える必要はありません。

それで、誰かが抗議しました。jquery ui では .draggable() を使用でき、jquerymobile ではスワイプ イベント (実際には html5 のドラッグ イベントです) を使用できます。

しかし、上記の解決策はすべて無駄です。

jquery ui の .draggable()、jquerymobile のスワイプ イベント、および html5 のドラッグ イベントでは、ブラウザのモバイル デバッグ モードを使用できますが、まったくドラッグできないことがわかります。

この記事が皆さんの jquery プログラミング設計に役立つことを願っています。