2

画像の上にドラッグ可能なサイズ変更可能な div (クロッパー) がある場合があります。タッチをモバイルで動作させるために、jQuery タッチ パンチ プラグインをインポートしました。問題は、ドラッグ可能なページを移動しているときにスクロールしたいということです。私は例をモックアップしました。次のコードは、スクロールを正しい位置に修正します。これは PC では機能しますが、Android フォンでは機能しません。

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

        $("#drag").resizable({
            handles: {
                'ne': '#negrip',
                'se': '#segrip',
                'sw': '#swgrip',
                'nw': '#nwgrip'
            }
        });

$("#noScroll").click(function (e) {
        $("body").addClass("stop-scrolling");
        $(document).scroll(function(e) { $(this).scrollTop(1000);});
        $(document).bind('touchstart', function(e){e.preventDefault()});
        $(document).bind('touchmove', function(e){e.preventDefault()});    
});

<body>

<div style="height: 500px; border : 1px solid;">big div</div>       
<a id="noScroll">STOP SCROLLING</a>
        <span id="holder">
                        <span id="drag">
                            <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
                            <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
                            <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
                            <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
                        </span>
                        <img id="img" src="http://halo.bungie.org/misc/assaultgodzilla_japanhalo2/lg/06_call_of_spartans.jpg" />
                </span>
</body>

セパレーター

        #holder { height:300px; width:300px; border:1px solid; display:block; position: relative; overflow:hidden; margin: 0 auto; }
        #img { height:1000px; width:1000px; display: block; background: no-repeat; overflow: hidden; }
        #drag { height:100px; width:100px; border: 1px solid #000000; background: #FFFFFF; display: block; position:absolute; top:0px; z-index:33; opacity:.6; }
  .stop-scrolling { height:100%; overflow:hidden; }


        #nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
            width: 20px;
            height: 20px;
            background-color: #ffffff;
            border: 1px solid #000000;
        }

        #nwgrip { top: 0; left: 0; }
        #negrip { top: 0; right: 0; }
        #segrip { bottom: 0; right: 0; }
        #swgrip { bottom: 0; left: 0; }

電話で少しズームし、一番下までスクロールして、[スクロールを停止] をクリックします。小さなボックスをドラッグすると、ページを一番上にすばやく移動すると、ページがスクロールしようとすることに気付くでしょう。

フィドルと直接の js シェル リンクへのリンクは次のとおりです。

http://jsfiddle.net/jMtjC/3/ http://fiddle.jshell.net/jMtjC/3/show/

モバイルで js シェル リンクに移動します。前もって感謝します！！

4

0 に答える 0