参见 fiddle :http://jsfiddle.net/mrcarllister/Z2GjN/
基本上,我的点击拖动滚动功能可以正常工作,除非您单击并拖动 anchor /链接。
似乎只有当鼠标光标停留在释放时的链接上时,URL 才会被跟随(例如,如果您拖动足够远并且链接离开窗口,则效果很好。)
;(function($){
$.fn.scrollsync = function( options ){
var settings = $.extend(
{
targetSelector:':first',
axis: 'xy'
},options || {});
function scrollHandler(event) {
if (event.data.xaxis){
event.data.followers.scrollLeft(event.data.target.scrollLeft());
}
if (event.data.yaxis){
event.data.followers.scrollTop(event.data.target.scrollTop());
}
}
settings.target = this.filter(settings.targetSelector).filter(':first');
settings.followers=this.not(settings.target); // the rest of elements
settings.xaxis= (settings.axis=='xy' || settings.axis=='x') ? true : false;
settings.yaxis= (settings.axis=='xy' || settings.axis=='y') ? true : false;
if (!settings.xaxis && !settings.yaxis) return;
settings.target.bind('scroll', settings, scrollHandler);
};
})( jQuery );
;(function($){
$.fn.dragscrollable = function( options ){
var settings = $.extend(
{
dragSelector:'>:first',
acceptPropagatedEvent: true,
preventDefault: true
},options || {});
var dragscroll= {
mouseDownHandler : function(event) {
if (event.which!=1 ||
(!event.data.acceptPropagatedEvent && event.target != this)){
return false;
}
event.data.lastCoord = {left: event.clientX, top: event.clientY};
$.event.add( document, "mouseup",
dragscroll.mouseUpHandler, event.data );
$.event.add( document, "mousemove",
dragscroll.mouseMoveHandler, event.data );
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
},
mouseMoveHandler : function(event) {
var delta = {left: (event.clientX - event.data.lastCoord.left),
top: (event.clientY - event.data.lastCoord.top)};
event.data.scrollable.scrollLeft(
event.data.scrollable.scrollLeft() - delta.left);
event.data.scrollable.scrollTop(
event.data.scrollable.scrollTop() - delta.top);
event.data.lastCoord={left: event.clientX, top: event.clientY}
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
},
mouseUpHandler : function(event) {
$.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
$.event.remove( document, "mouseup", dragscroll.mouseUpHandler);
if (event.data.preventDefault) {
event.preventDefault();
return false;
}
}
}
this.each(function() {
var data = {scrollable : $(this),
acceptPropagatedEvent : settings.acceptPropagatedEvent,
preventDefault : settings.preventDefault }
$(this).find(settings.dragSelector).
bind('mousedown', data, dragscroll.mouseDownHandler);
});
};
})( jQuery );
我很确定我必须“return:false;”对于 anchor ,但我不确定如何仅在拖动/滚动时执行此操作。
如有任何帮助,我们将不胜感激。
编辑 - 伊恩的建议有效,但我只需要一些修改:
- 只能上下滚动(不能左右滚动)
- 限制内容/div 大小 - 并且不能进一步滚动。
--->>>>>>>>>>>>>>
干杯,
卡尔
最佳答案
好吧,这里的问题是它使用鼠标上下来工作,所以你可以永久禁用 anchor ,或者它会工作,所以你需要有一些业务逻辑来说明它何时打开和关闭。如果您想编辑可拖动的内容,请将其放入代码中即可工作
我添加
event.data.initCoord = event.data.lastCoord
到 mouseDownHandler 并添加
if(event.data.lastCoord != event.data.initCoord){
obj = $(this);
$('a', obj).on('click', function(event) {
event.preventDefault();
});
setTimeout(function(){$('a', obj).off('click'); },300);
}
到 mouseUpHandler 并且我打开了 Preventdefault
$('#viewport, #inner').
dragscrollable({dragSelector: '.dragger:first', preventDefault: true});
关于jquery - 单击并拖动滚动时禁用链接 (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13513077/