Move JS folder

e107_web/js/core/draggable.js

@@ -0,0 +1,99 @@
+/*
+ * Prototype UI http://prototype-ui.com/
+ * 
+ * Group: Drag UI provides Element#enableDrag method that allow elements to fire
+ * drag-related events.
+ * 
+ * Events fired: - drag:started : fired when a drag is started (mousedown then
+ * mousemove) - drag:updated : fired when a drag is updated (mousemove) -
+ * drag:ended : fired when a drag is ended (mouseup)
+ * 
+ * Notice it doesn't actually move anything, drag behavior has to be implemented
+ * by attaching handlers to drag events.
+ * 
+ * Drag-related informations: event.memo contains useful information about the
+ * drag occuring: - dx : difference between pointer x position when drag started
+ * and actual x position - dy : difference between pointer y position when drag
+ * started and actual y position - mouseEvent : the original mouse event, useful
+ * to know pointer absolute position, or if key were pressed.
+ * 
+ * Example, with event handling for a specific element: > // Now "resizable"
+ * will fire drag-related events > $('resizable').enableDrag(); > > // Let's
+ * observe them > $('resizable').observe('drag:started', function(event) { >
+ * this._dimensions = this.getDimensions(); > }).observe('drag:updated',
+ * function(event) { > var drag = event.memo; > > this.setStyle({ > width:
+ * this._dimensions.width + drag.dx + 'px', > height: this._dimensions.height +
+ * drag.dy + 'px' > }); > });
+ * 
+ * Example, with event delegating on the whole document: > // All elements in
+ * the having the "draggable" class name will fire drag events. >
+ * $$('.draggable').invoke('enableDrag'); > > document.observe('drag:started',
+ * function(event) { > UI.logger.info('trying to drag ' + event.element().id); >
+ * }):
+ */
+Element.addMethods( {
+	enableDrag : function(element) {
+		return $(element).writeAttribute('draggable');
+	},
+
+	disableDrag : function(element) {
+		return $(element).writeAttribute('draggable', null);
+	},
+
+	isDraggable : function(element) {
+		return $(element).hasAttribute('draggable');
+	}
+});
+
+(function() {
+	var initPointer, draggedElement;
+
+	document.observe('mousedown', function(event) { 
+		if (draggedElement = findDraggable(event.element())) {
+			// prevent default browser action to avoid selecting text for
+			// instance
+			event.preventDefault();
+			initPointer = event.pointer();
+			
+			document.observe('mousemove', startDrag);
+			document.observe('mouseup', cancelDrag);
+		}
+	});
+
+	function findDraggable(element) {
+		while (element && element !== document) {
+			if (element.hasAttribute('draggable'))
+				return element;
+			element = $(element.parentNode);
+		}
+	}
+
+	function startDrag(event) {
+		document.stopObserving('mousemove', startDrag).stopObserving('mouseup', cancelDrag).observe('mousemove', drag).observe('mouseup', endDrag);
+		fire('drag:started', event);
+	}
+
+	function cancelDrag(event) {
+		document.stopObserving('mousemove', startDrag).stopObserving('mouseup', cancelDrag);
+	}
+
+	function drag(event) {
+		fire('drag:updated', event);
+	}
+
+	function endDrag(event) {
+		document.stopObserving('mousemove', drag).stopObserving('mouseup', endDrag);
+
+		fire('drag:ended', event);
+	}
+
+	function fire(eventName, event) {
+		var pointer = event.pointer();
+
+		draggedElement.fire(eventName, {
+			dx : pointer.x - initPointer.x,
+			dy : pointer.y - initPointer.y,
+			mouseEvent : event
+		});
+	}
+})();