Question

我只是尝试调用dragScroll事件。但它没有给出任何回应。我尝试以下脚本。

$('.container').dragScroll({
stop: function() {
alert();
} 
});

我怎么能这样做？我的错是什么。？

Answer 1

此插件中没有此类事件。

Answer 2

我在插件中添加了事件。

使用方法：

$('#container').dragScroll({
  start: startDrag,
  dragging: dragging,
  stop: stopDrag
});

dragscroll.js

/* 
  DraggScroll is a JQuery extension for scrolling by clicking and dragging from within a container.
  Author: James Climer (http://climers.com)
  Released under the Apache V2 License: http://www.apache.org/licenses/LICENSE-2.0.html
  Requires JQuery: http://jquery.com
  Get latest version from: https://github.com/jaclimer/JQuery-DraggScroll

  EDIT Emmanuel Delay: extra event handlers: 'start', 'stop', 'dragging'.  
  @see http://stackoverflow.com/questions/30862588/dragscroll-stop-event-was-not-working
*/
(function ($) {
  $.fn.dragScroll = function (options) {
    /* Mouse dragg scroll */
    var x, y, top, left, down;
    var $scrollArea = $(this);
    $($scrollArea).attr("onselectstart", "return false;");   // Disable text selection in IE8
    $($scrollArea).mousedown(function (e) {
      e.preventDefault();
      down = true;
      x = e.pageX;
      y = e.pageY;
      top = $(this).scrollTop();
      left = $(this).scrollLeft();
      if (typeof options.start === 'function') {
        options.start(e);
      }
    });
    $($scrollArea).mouseleave(function (e) {
      down = false;
      // this stops the scroll, so let's also call options.stop()
      if (typeof options.stop === 'function') {
        options.stop(e);
      }
    });
    $("body").mousemove(function (e) {
      if (down) {
        var newX = e.pageX;
        var newY = e.pageY;
        $($scrollArea).scrollTop(top - newY + y);
        $($scrollArea).scrollLeft(left - newX + x);
        if (typeof options.dragging === 'function') {
          options.dragging(e);
        }
      }
    });
    $("body").mouseup(function (e) { 
      down = false; 
      if (typeof options.stop === 'function') {
        options.stop(e);
      }
    });
  };
})(jQuery);

示例：

<style>
#container {
height: 400px;
width: 500px;
border: 1px solid #000;
overflow: auto;
}
</style>

<div id="container">
  <div style="width:800px;padding:10px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum tellus nec gravida venenatis. Fusce tempor fermentum leo, ac condimentum orci gravida eget. Nam pellentesque, sapien vitae elementum posuere, libero est accumsan libero, a ultricies augue nisi eu nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin risus neque, non porta mi vehicula sed. Nam semper imperdiet libero, eget ornare mauris. Aliquam sodales congue ante nec molestie. In ac nulla vitae ante lacinia pulvinar. Morbi vehicula nisl ante, sit amet convallis massa facilisis quis. Vestibulum vulputate est a augue dictum ultricies.</p>
  <p>In eget est vitae libero vulputate dictum vel ac felis. Maecenas et tortor nec felis posuere viverra ut eget elit. Phasellus eu pellentesque sapien. Morbi porttitor nulla eget libero viverra consequat. Nunc metus nisi, gravida eu elit sed, cursus malesuada orci. Phasellus tempus enim vitae arcu imperdiet porta. Vestibulum eu nisl congue, aliquam turpis quis, vulputate odio. Quisque sed rhoncus elit. Proin viverra molestie malesuada. Phasellus scelerisque tristique nisi adipiscing aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel dictum dolor, ac congue libero. Sed adipiscing pretium massa vel imperdiet. In faucibus sed arcu eu sodales.</p>
  <p>In dapibus rutrum mi, a posuere orci venenatis a. Suspendisse ligula nisl, bibendum eu vehicula eu, dictum pharetra tellus. Aenean vel mattis felis. Maecenas est tellus, aliquam in velit nec, mattis imperdiet est. Nullam mattis condimentum ante tempus eleifend. Aliquam dapibus nibh diam, non dictum erat pharetra in. Quisque posuere nulla vitae massa sagittis porta. Ut lacinia lorem vitae blandit ornare. Integer porta nunc eget nibh blandit, vel laoreet metus laoreet.</p>
  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean at risus justo. Proin sit amet porttitor justo. Sed augue dolor, fermentum non ornare vitae, pellentesque a turpis. Vestibulum porta posuere aliquet. Cras vel interdum ligula, vitae tempus dolor. Cras non arcu in massa bibendum vestibulum et eget leo. Phasellus felis metus, dapibus quis pharetra sed, porttitor eu risus. Proin cursus turpis non turpis posuere facilisis.</p>
  <p>Maecenas venenatis massa vitae lacinia rhoncus. Suspendisse fringilla mattis enim id elementum. Pellentesque id tempus sapien, ut laoreet erat. Curabitur consectetur enim vel condimentum luctus. Duis eu sapien nunc. Nulla porta gravida nulla nec lobortis. Donec a ultricies quam, ac aliquet quam. Sed commodo luctus fringilla. Integer eu malesuada nisi, vitae laoreet turpis. Duis nec ligula sed nisi accumsan egestas. Pellentesque at volutpat nunc. Proin pretium elit sem, egestas ornare purus fermentum sit amet. Donec pharetra libero id odio molestie lacinia ut sed urna.</p>
  </div>
</div>
<div id="display"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dragscroll.js"></script>
<script>
  // user functions
  function startDrag(e) {
    // notice: this gets executed, but immediatly the event 'dragging' takes over
    document.getElementById('display').innerHTML = 'Dragging started'; 
  }
  function dragging(e) {
    document.getElementById('display').innerHTML = 'Dragging';
  }
  function stopDrag(e) {
    document.getElementById('display').innerHTML = 'Dragging stopped';
  }
  $(document).ready(function() { 
    $('#container').dragScroll({
      start: startDrag,
      dragging: dragging,
      stop: stopDrag
    });
  });
</script>

DragScroll停止事件无效？

2 个答案: