2

我有一个案例，我在图像上有一个可拖动的可调整大小的 div（裁剪器）。为了在移动设备上工作，我导入了 jQuery touch punch 插件。问题是在页面周围移动可拖动对象时想要滚动。我模拟了一个例子。以下代码将我的滚动修复到正确的位置。这适用于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 shell 链接的链接是：

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

转到移动设备上的 js shell 链接。提前致谢！！

4

0 回答 0