1. 首页
  2. 问答
  3. jQuery Sortable - 滚动div与溢出：自动

jQuery Sortable - 滚动div与溢出：自动

2009-06-07 130 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

相关问题

 相关问题