https://www.monoplex.com/js/dragscrollable.js

1/*
2 * jQuery dragscrollable Plugin
3 * version: 1.0 (25-Jun-2009)
4 * Copyright (c) 2009 Miquel Herrera
5 *
6 * Dual licensed under the MIT and GPL licenses:
7 *   http://www.opensource.org/licenses/mit-license.php
8 *   http://www.gnu.org/licenses/gpl.html
9 *
10 */
11;(function($){ // secure $ jQuery alias
12
13/**
14 * Adds the ability to manage elements scroll by dragging
15 * one or more of its descendant elements. Options parameter
16 * allow to specifically select which inner elements will
17 * respond to the drag events.
18 *
19 * options properties:
20 * ------------------------------------------------------------------------
21 *  dragSelector         | jquery selector to apply to each wrapped element
22 *                       | to find which will be the dragging elements.
23 *                       | Defaults to '>:first' which is the first child of
24 *                       | scrollable element
25 * ------------------------------------------------------------------------
26 *  acceptPropagatedEvent| Will the dragging element accept propagated
27 *	                     | events? default is yes, a propagated mouse event
28 *	                     | on a inner element will be accepted and processed.
29 *	                     | If set to false, only events originated on the
30 *	                     | draggable elements will be processed.
31 * ------------------------------------------------------------------------
32 *  preventDefault       | Prevents the event to propagate further effectivey
33 *                       | dissabling other default actions. Defaults to true
34 * ------------------------------------------------------------------------
35 *
36 *  usage examples:
37 *
38 *  To add the scroll by drag to the element id=viewport when dragging its
39 *  first child accepting any propagated events
40 *	$('#viewport').dragscrollable();
41 *
42 *  To add the scroll by drag ability to any element div of class viewport
43 *  when dragging its first descendant of class dragMe responding only to
44 *  evcents originated on the '.dragMe' elements.
45 *	$('div.viewport').dragscrollable({dragSelector:'.dragMe:first',
46 *									  acceptPropagatedEvent: false});
47 *
48 *  Notice that some 'viewports' could be nested within others but events
49 *  would not interfere as acceptPropagatedEvent is set to false.
50 *
51 */
52$.fn.dragscrollable = function( options ){
53
54	var settings = $.extend(
55		{
56			dragSelector:'>:first',
57			acceptPropagatedEvent: true,
58            preventDefault: true
59		},options || {});
60
61
62	var dragscroll= {
63		mouseDownHandler : function(event) {
64			// mousedown, left click, check propagation
65			if (event.which!=1 ||
66				(!event.data.acceptPropagatedEvent && event.target != this)){
67				return false;
68			}
69
70			// Initial coordinates will be the last when dragging
71			event.data.lastCoord = {left: event.clientX, top: event.clientY};
72
73			$.event.add( document, "mouseup",
74						 dragscroll.mouseUpHandler, event.data );
75			$.event.add( document, "mousemove",
76						 dragscroll.mouseMoveHandler, event.data );
77			if (event.data.preventDefault) {
78                event.preventDefault();
79                return false;
80            }
81		},
82		mouseMoveHandler : function(event) { // User is dragging
83			// How much did the mouse move?
84			var delta = {left: (event.clientX - event.data.lastCoord.left),
85						 top: (event.clientY - event.data.lastCoord.top)};
86
87			// Set the scroll position relative to what ever the scroll is now
88			event.data.scrollable.scrollLeft(
89							event.data.scrollable.scrollLeft() - delta.left);
90			event.data.scrollable.scrollTop(
91							event.data.scrollable.scrollTop() - delta.top);
92
93			// Save where the cursor is
94			event.data.lastCoord={left: event.clientX, top: event.clientY}
95			if (event.data.preventDefault) {
96                event.preventDefault();
97                return false;
98            }
99
100		},
101		mouseUpHandler : function(event) { // Stop scrolling
102			$.event.remove( document, "mousemove", dragscroll.mouseMoveHandler);
103			$.event.remove( document, "mouseup", dragscroll.mouseUpHandler);
104			if (event.data.preventDefault) {
105                event.preventDefault();
106                return false;

107            }
108		}
109	}
110
111	// set up the initial events
112	this.each(function() {
113		// closure object data for each scrollable element
114		var data = {scrollable : $(this),
115					acceptPropagatedEvent : settings.acceptPropagatedEvent,
116                    preventDefault : settings.preventDefault }
117		// Set mouse initiating event on the desired descendant
118		$(this).find(settings.dragSelector).
119						bind('mousedown', data, dragscroll.mouseDownHandler);
120	});
121}; //end plugin dragscrollable
122
123})( jQuery ); // confine scope