我有一个案例,我在图像上有一个可拖动的可调整大小的 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 链接。提前致谢!!