Question

我有一个使用jQuery的页面，其中一些列表已经可以排序。该列表位于div中，该div在样式表中具有固定的高度和溢出设置为auto。

sortable的scroll属性似乎会影响整个页面的滚动，有什么办法可以让容器div在鼠标靠近边缘时自动向上或向下滚动？

由于

格雷姆

Answer 1

我会看一下我用过的jQuery插件，发现非常好看：

http://rascarlito.free.fr/hoverscroll/

再见西里尔

Answer 2

感谢Max和Fyasar。我让它与Jquery 1.4.2一起工作。我唯一需要改变的是

$().mousemove(function(e) {...});
//change it to 
this.mousemove(function(e) {...});

现在可以在固定高度和溢出的固定div中进行排序：auto现在运行良好。谢谢！

Answer 3

看看你是否可以使用jQuery scrollTo插件。我假设您正在谈论自动滚动，具体取决于鼠标与容器div边缘的接近程度。

Answer 4

格雷姆，我尝试了你的scripterlative.com意见，但在这个人的脚本过期后几天，并在屏幕上显示试用信息：）

之后，我开发了一个小的jquery插件，可以轻松解决这个问题。

使用此插件时，它会自动检测选择器元素的边缘，另一方面，你也可以将jquery的sortable放到这个div的内部。

不要忘记这个插件依赖于Jquery.Scrollto插件。

它解决了我的问题，我希望它会对你有所帮助。

插件来源是;

/*
* jQuery Html element edges auto scrollable plugin.
*
* Copyright (c) 2009 Fatih YASAR
*/
(function($) {
    $.fn.setEdgesAutoScrollable = function(options) {
        var defaults = {
            scrollspeed: 200,
            incrementSeed: 20
        };

        var options = $.extend(defaults, options)

        var top = $(this).offset().top;
        var left = $(this).offset().left;
        var height = $(this).height();
        var width = $(this).width();
        var selectedItemSelector = this.selector;

        var xmin = left;
        var xmax = (width + left) + 20;

        var ymin = (height + top) + 10;
        var ymax = (height + top) + 30;


        $().mousemove(function(e) {
        if (e.pageX > xmin && e.pageX < xmax) {
                if (e.pageY > (top - 10) && e.pageY < (top + 10)) {
                    //top edges
                    $(selectedItemSelector).scrollTo('-=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
                } else if (e.pageY > ymin && e.pageY < ymax) {
                    //bottom edges
                    $(selectedItemSelector).scrollTo('+=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
                } else {
                    $(selectedItemSelector).stop();
                }
            }

            return true;
        });
    }
})(jQuery);

用于演示如何使用的Html页面示例。 Html页面源是;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
    <script src="js/[plugin src]" type="text/javascript"></script>
    <style>
    body
    {
        font-family: "Trebuchet MS" , "Helvetica" , "Arial" , "Verdana" , "sans-serif";
        font-size:13px;
    }

     .scrollable-wrapper
     {
        width:650px;
        height:350px;
     }   
     .scrollable-area
     {
        float:left;
        width:220px;
        height:350px;
        border:solid 2px #ccc;   
        margin-left:20px;      
        overflow:auto;
     }
    </style>
    <script>
        $(function() {
            $("#scrollable-area1").setEdgesAutoScrollable();
            $("#scrollable-area2").setEdgesAutoScrollable();
        });
    </script>
</head>
<body>
    <div class="scrollable-wrapper">
      <div id="scrollable-area1" class="scrollable-area">
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>     
      </div>
      <div id="scrollable-area2" class="scrollable-area">
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>
       <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software </p>      
      </div>
    </div>

</body>
</html>

Answer 5

我能够实现fyasar的解决方案，它对我来说很有用。我稍微扩展了他的插件，并希望将其发布在其他任何偶然发现他的优秀代码的人身上。

我遇到的问题是，它没有给出灵活性来控制开始滚动的盒子顶部和底部的“边距”位于何处。那个位在他的解决方案中是硬编码的。

我稍微扩展了逻辑，并更改了插件以接受顶部和底部偏移，以控制框顶部和底部边距的大小。

这些选项现在默认为我发现的最合理的滚动点。但是控件的每次使用都可以作为参数传递到所需的范围。

    (function($) {
    $.fn.setEdgesAutoScrollable = function(options) {
        var defaults = {
            scrollspeed: 200,
            incrementSeed: 20,
            topOffsetTop: -10,
            topOffsetBottom: 30,
            bottomOffsetTop: -20,
            bottomOffsetBottom: 20
        };

        var options = $.extend(defaults, options)

        var top = $(this).offset().top;
        var left = $(this).offset().left;
        var height = $(this).height();
        var width = $(this).width();
        var selectedItemSelector = this.selector;

        var bottom = (top + height);
        var right = (left + width);

        var xmin = left;
        var xmax = right + 20; // take scrollbar into account

        var topScrollTop = top + defaults.topOffsetTop;
        var topScrollBottom = top + defaults.topOffsetBottom;

        var bottomScrollTop = bottom + defaults.bottomOffsetTop;
        var bottomScrollBottom = bottom + defaults.bottomOffsetBottom;

        $().mousemove(function(e) {

            var myPageX = e.pageX;
            var myPageY = e.pageY;

            if (myPageX > xmin && myPageX < xmax) {

                if (myPageY > topScrollTop && myPageY < topScrollBottom) {
                    //top edges
                    $(selectedItemSelector).scrollTo('-=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
                } else if (myPageY > bottomScrollTop && myPageY < bottomScrollBottom) {
                    //bottom edges
                    $(selectedItemSelector).scrollTo('+=' + defaults.incrementSeed + 'px', defaults.scrollspeed);
                } else {
                    $(selectedItemSelector).stop();
                }
            }

            return true;
        });
    }
})(jQuery);

我希望通过优秀的jquery.ui可排序控件帮助其他任何人遇到此问题。

最高

jQuery Sortable - 在div中滚动，带溢出：auto

5 个答案: