logo标签列表

点击并拖动滚动时禁用链接（jQuery）

jqueryhyperlinkscrolldragdisable-link
6

请查看示例：http://jsfiddle.net/mrcarllister/Z2GjN/

基本上，我已经实现了单击拖动滚动，但是当您单击并拖动锚点/链接时，它不起作用。

只有当鼠标光标在释放时仍停留在链接上时，才会跟随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;”，但我不确定如何仅在拖动/滚动时执行。
任何帮助将不胜感激。
编辑 - Ian的建议起作用了，但我只需要进行几个修改：
1. 只能上下滚动（不能左右滚动） 2. 限制在内容/ div大小内，并且不会滚动到更远的地方。
谢谢，
卡尔
2个回答
2
好的，问题在于它使用鼠标上下键来工作，所以你可以永久禁用锚点或让它工作，因此需要一些业务逻辑来判断它何时开启和关闭。如果你想编辑dragscrollable，请将以下代码放入其中，它将起作用。 http://jsfiddle.net/Z2GjN/33/ 我添加了。
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);
        }

我将preventdefault打开，并将其绑定到mouseUpHandler上。

$('#viewport, #inner').
        dragscrollable({dragSelector: '.dragger:first', preventDefault: true});
1

根据您的示例，这似乎在fiddle上可以工作。

<head>
    <title>iPhone Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<script type="text/javascript">
  $(document).ready(function() {


    // Set drag scroll on first descendant of class dragger on both selected elements
    $('.dragger').
        draggable({ start:function(){ console.log("HI");

    }});

  });

</script>


</head>
Ian Overton - 谢谢你。看起来这已经解决了链接问题。但现在拖动/滚动出现了问题。现在它是平移而不是滚动，并且没有限制在 div 内的内容。感谢您的帮助！ - epluribusunum
注意，我只需要这段代码能够上下滚动，并在内容停止时停止！谢谢！！ - epluribusunum
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接