jQuery Sortable-прокрутка в div с переполнением: авто

У меня есть страница с использованием jQuery с некоторыми списками, которые были сделаны сортируемыми. Список находится внутри div, который имеет фиксированную высоту и переполнение авто в таблице стилей.

атрибут прокрутки sortable, похоже, влияет на прокрутку всей страницы, есть ли способ заставить контейнер div автоматически прокручиваться вверх или вниз, когда мышь находится рядом с краем?

спасибо

Грэм

9
jquery-ui jquery-ui-sortable

5 ответов

Я бы посмотрел на этот плагин jQuery, который я использовал и нашел довольно приятным:

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

пока, Кирилл!--1-->

2

благодаря Макс и Fyasar. Я получил его для работы с Jquery 1.4.2. Единственное, что я должен изменить, это

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

сортировку в фиксированный div с фиксированной высотой и overflow:auto это прекрасно работает сейчас. Спасибо!

2

посмотрите, можете ли вы использовать jQuery scrollTo плагин. Я предполагаю, что вы говорите об автоматической прокрутке в зависимости от близости мыши к краям контейнера div.

1

Грем, Я пробовал ... scripterlative.com мнение, но через несколько дней после того, как скрипт этого парня истек и отобразил сообщение trial info на экране:)

после этого я разработал небольшой плагин jquery для легкого решения этой проблемы.

когда вы используете этот плагин, он автоматически обнаружит края элементов селектора, С другой стороны, вы также можете поместить сортировку jquery внутрь этого divs.

Не забывайте, что этот плагин зависит от На 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>
1

я смог реализовать решение 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.сортируемый пользовательского интерфейса управление.

  • Макс
1