jQuery でドラッグスクロールを設定する簡単なプラグインのサンプル。

サンプルページ:http://moriwaki.net/jquery/dragscroll.html

サンプルHTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ドラッグスクロールのサンプル</title>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load("jquery", "1.4");
</script>
<script type="text/javascript" src="jquery.dragscroll.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#scroll').dragScroll(); // ドラッグスクロール設定
  });
</script>
</head>
<body>
<h3>jQuery ドラッグスクロールのサンプル</h3>

<div id="scroll" style="width:300px;height:300px;">
  <div style="width:500px;height:500px;background-color:#ff0000">
    <span style="font-size:48pt">あいうえおあいうえおあいうえおあいうえお…</span>
  </div>
</div>
</body>
</html>

サンプルJavaScript(jquery.dragscroll.js):

(function() {
  $.fn.dragScroll = function() {
    var target = this;
    $(this).mousedown(function (event) {
      $(this)
        .data('down', true)
        .data('x', event.clientX)
        .data('y', event.clientY)
        .data('scrollLeft', this.scrollLeft)
        .data('scrollTop', this.scrollTop);
      return false;
    }).css({
      'overflow': 'hidden', // スクロールバー非表示
      'cursor': 'move'
    });
    // ウィンドウから外れてもイベント実行
    $(document).mousemove(function (event) {
      if ($(target).data('down') == true) {
        // スクロール
        target.scrollLeft($(target).data('scrollLeft') + $(target).data('x') - event.clientX);
        target.scrollTop($(target).data('scrollTop') + $(target).data('y') - event.clientY);
        return false; // 文字列選択を抑止
      }
    }).mouseup(function (event) {
      $(target).data('down', false);
    });

    return this;
  }
})(jQuery);
 

Comments are closed.

Modified by MORIWAKI.NET.