1. 首頁
  2. 問答
  3. jQuery Sortable - 滾動div與溢出：自動

jQuery Sortable - 滾動div與溢出：自動

2009-06-07 227 views
9

我有一個頁面使用jQuery的一些列表已被製成可排序。該列表位於樣式表中具有固定高度和溢出設置爲自動的div內。jQuery Sortable - 滾動div與溢出：自動

可排序的滾動屬性似乎影響整個頁面的滾動，有沒有什麼辦法可以讓容器div自動向上或向下滾動時鼠標靠近邊緣？

感謝

格雷姆

來源

2009-06-07 Graeme

回答

1

看看你是否可以使用jQuery的scrollTo插件。我假設你正在談論自動滾動，取決於鼠標與容器div邊緣的接近程度。

來源

2009-06-07 08:13:26 karim79

+0

很酷的感謝!!，我會給它一個鏡頭 - 是的，我說的是自動滾動，因爲我拖動關於div的ui.draggable。當我靠近邊緣時，我希望它向下/向上移動 – Graeme 2009-06-07 16:46:42

+0

祝你好運 - 讓我知道它是怎麼回事，甚至發佈你的解決方案，如果你得到它的工作:) – karim79 2009-06-07 17:14:02

1

格雷姆， 我想你的scripterlative.com的意見，但這個傢伙的腳本，幾天後到期，並顯示在屏幕:)

後的審判信息的消息，我開發了一個小的jQuery插件輕鬆解決這個問題。

當你使用這個插件時，它會自動檢測到選擇器元素的邊緣，另一方面你也可以把jquery的排序到這個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>

來源

2009-07-20 08:23:09 fyasar

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.ui排序控制。

  • 最大

來源

2009-11-02 19:02:51

2

感謝Max和Fyasar。我把它用於Jquery 1.4.2。 我必須要改變的唯一事情是

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

現在排序與固定的高度和溢出的固定格：現在汽車工作很好。 謝謝！

來源

2010-08-04 06:37:45 yial2

相關問題

 相關問題