https://www.kmu.edu.tw/plugins/system/easyslider/assets/js/lib/draggable.js

1void function ( $, _ ) {
2
3	var x, y,
4		deltaX, deltaY,
5		offsetX, offsetY,
6		distance, direction,
7		velocityX, velocityY,
8		timeStart, timeStop, timeOffset,
9		axis, foundAxis,
10		event, target,
11		tapped, dragging,
12		isTouchDevice, now,
13		DRAG_DATA;
14
15	$(window).one('touchstart', function ( e ) {
16		isTouchDevice = true;
17	})
18	$(document).ready(function () {
19
20		bindEvent(document.body, 'touchstart', tap);
21		bindEvent(document.body, 'touchmove', drag);
22		bindEvent(document.body, 'touchend', release);
23		bindEvent(document.body, 'touchcancel', release);
24
25		bindEvent(document.body, 'mousedown', tap);
26		bindEvent(document.body, 'mousemove', drag);
27		bindEvent(document.body, 'mouseup', release);
28		bindEvent(document.body, 'blur', release);
29
30		$(window).on('mouseout', function ( e ) {
31			e.toElement || release(e);
32		});
33	})
34
35	function tap ( e ) {
36		if (e.target.classList.contains('jsn-es-draggable')) {
37			target = $(e.target);
38		}
39		else {
40			var parent = findParentNode(e.target);
41			if (parent) {
42				target = $(parent);
43			}
44			else {
45				return;
46			}
47		}
48
49		if ( tapped )
50			return;
51
52		now = timeStart = Date.now();
53		DRAG_DATA = {};
54
55		switch ( e.type ) {
56			case 'mousedown':
57				if (isTouchDevice)
58					return;
59				x = e.pageX;
60				y = e.pageY;
61				e.preventDefault();
62				break;
63			case 'touchstart':
64				if ( e.touches.length != 1 )
65					return;
66				x = e.touches[ 0 ].clientX;
67				y = e.touches[ 0 ].clientY;
68				break;
69		}
70		deltaX = 0;
71		deltaY = 0;
72		offsetX = 0;
73		offsetY = 0;
74		foundAxis = null;
75		distance = 0;
76		direction = 'none';
77		axis = 'none';
78
79		tapped = true;
80	}
81
82	function drag ( e ) {
83		if (!tapped)
84			return;
85		switch ( e.type ) {
86			case 'mousemove':
87				if (isTouchDevice)
88					return;
89				var pageX = e.pageX;
90				var pageY = e.pageY;
91				e.preventDefault();
92				break;
93			case 'touchmove':
94				if ( e.touches.length != 1 )
95					return;
96				var pageX = e.touches[ 0 ].clientX;
97				var pageY = e.touches[ 0 ].clientY;
98				break;
99		}
100		now = Date.now();
101
102		deltaX = pageX - x;
103		deltaY = pageY - y;
104		offsetX += deltaX;
105		offsetY += deltaY;
106		x = pageX;
107		y = pageY;
108
109		if ( !foundAxis ) {
110			if ( Math.abs(offsetX) > Math.abs(offsetY) ) {
111				axis = 'x';
112			}
113			else if ( Math.abs(offsetX) < Math.abs(offsetY) ) {
114				axis = 'y';
115			}
116			else {
117				axis = 'none';
118			}
119			distance = Math.max(Math.abs(offsetX), Math.abs(offsetY));
120			if ( distance > 50 )
121				foundAxis = true;
122		}
123		Math.abs(deltaX) >= Math.abs(deltaY) ?
124			direction = deltaX > 0 ? 'right' : deltaX < 0 ? 'left' : 'none' :
125			direction = deltaY > 0 ? 'down' : deltaY < 0 ? 'up' : 'none';
126
127		if ( !dragging ) {
128			dragging = true;
129
130			target.trigger(createEvent('es_dragstart', e ), getData());
131			$('body').add(target).addClass('jsn-es-draggable-dragging');
132		}
133		if ( dragging ) {
134
135			timeStop = Date.now();
136			calculateVelocity();
137			timeStart = Date.now();
138			target.trigger(createEvent('es_dragmove', e ), getData());
139		}
140	}
141
142	function release ( e ) {
143		if ( !tapped )
144			return;
145		switch ( e.type ) {
146			case 'touchend':
147			case 'touchcancel':
148				if ( e.touches.length )
149					return;
150		}
151		tapped = false;
152
153		if ( !dragging )
154			return
155
156		timeStop = Date.now();
157		calculateVelocity();
158
159		dragging = false;
160		$('body').add(target).removeClass('jsn-es-draggable-dragging');
161		target.trigger(createEvent('es_dragstop', e), getData());
162		target.removeData('jsn-es-draggable-data');
163	}
164
165	function calculateVelocity() {
166		timeOffset = timeStop - timeStart;
167		velocityX = Math.abs(deltaX / timeOffset);
168		velocityY = Math.abs(deltaY / timeOffset);
169	}
170	function getData () {
171		var data = DRAG_DATA;
172		data.direction = direction;
173		data.axis = axis;
174		data.deltaX = deltaX;
175		data.deltaY = deltaY;
176		data.moveX = offsetX;
177		data.moveY = offsetY;
178		data.velocityX = velocityX;
179		data.velocityY = velocityY;
180
181		DRAG_DATA = data;
182
183		return data;
184	}
185	function bindEvent( element, event, handler, capture) {
186		if (element.addEventListener)
187			return element.addEventListener(event,handler,capture);
188		if (element.attachEvent)
189			return element.attachEvent(event,handler,capture);
190	}
191	function createEvent( type, e ) {
192		var options = {};
193		options.originalEvent = e;
194		options.preventDefault = _.bind(e.preventDefault, e);
195		options.stopPropagation = _.bind(e.stopPropagation, e);
196		return $.Event(type, options)
197	}
198	function findParentNode( child ) {
199		var parent = child.parentNode, found = null;
200
201		while (parent && !found && !parent.isEqualNode(document.body))
202			parent.classList && parent.classList.contains('jsn-es-draggable') ?
203				found = parent:
204				parent = parent.parentNode;
205
206		return found;
207	}
208
209}(jQuery, _ )