snapshot
/
GuaranaUI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!DOCTYPE html>

<html>
<head>
	<link rel="stylesheet" href="../../../themes/themeroller/maemo5-theme/ui.all.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../../../themes/nokia/ext-theme/maemo5/800x480/custom.css" type="text/css" media="screen" />

	<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

	<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>

	<style type="text/css" media="screen">
		body {
			font-size: 14px;
			font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
		}

		#drag {
			padding: 20px;
			position: absolute;
			top: 20px; left: 100px;
			cursor: move;
		}
	</style>

</head>

<body>

<div id="drag" class="ui-widget-header ui-corner-all">Drag-me!</div>

<script type="text/javascript" charset="utf-8">

	Nokia.use('widget', function() {
		
		(function() {
		    Nokia.Drag = Nokia.Widget.extend({
		        initialize: function(options) {
		            var instance = this;
		
		            var defaults = {
		                element: ''
		            };
		
		            instance.options = jQuery.extend(defaults, options);
		
		            instance._super.apply(instance, [instance.options]);
		
		            var element = instance.options.element;
		
		            instance.element = jQuery(element).css('position', 'absolute');
		
		            instance._attachEvents();
		
		            instance.registerVibrationOn(['create']);
		            instance.fireCallback('create');
		        },
		
		        _attachEvents: function() {
		            var instance = this;
		            var element = instance.element;
		
		            element.bind('mousedown', function(e) {
		            	instance.startCoord = {x: e.pageX, y: e.pageY};
		            	instance.doDrag = true;
						return false;
		            });
		
		            element.bind('mouseup', function() {
		            	instance.doDrag = false;
						return false;
		            });
		
		            jQuery(document).bind('mousemove', function(e) {
		                instance._registerMouseDelta(e.clientX, e.clientY);
						return false;
		            });
		
				},
		
				_registerMouseDelta: function(x, y) {
					var instance = this;
					var element = instance.element;
					var startCoord = instance.startCoord;
		
					if ( instance.doDrag ) {
						element.css({top: startCoord.y + (y - startCoord.y - 10) + 'px', left: startCoord.x + (x - startCoord.x - 10) + 'px' });
					}
		
				}
		
		    });
		})();
		
		var drag = new Nokia.Drag({
			element: '#drag'
		});
	});

</script>

</body>
</html>