Ben Boeckel avatar Ben Boeckel committed 2baffdd

Add an example for the draggable class

Comments (0)

Files changed (1)

examples/draggable.html

+<html>
+  <head>
+  	<title>Draggable Example</title>
+  </head>
+	<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" title="no title" charset="utf-8">
+	<style type="text/css" media="screen">
+
+	</style>
+<body>
+	
+	<div style="text-align: center;" id="target">
+		<label>Value: <span data-bind="text: value, draggable: value, attr: {min: min, max: max}"></span></label><br />
+		<label>Min: <span data-bind="text: min, draggable: min, attr: {max: value}"></span></label><br />
+		<label>Max: <span data-bind="text: max, draggable: max, attr: {min: value}"></span></label><br />
+		
+		<br><br>
+	</div>
+	
+	<script src="vendor/jquery.js"></script>
+	<script src="vendor/jquery.hoverable.js"></script>
+	<script src="vendor/knockout.js"></script>
+	<script src="js/draggable.js"></script>
+	<script>
+		var vm = {
+			value: ko.observable(50),
+			min: ko.observable(10),
+			max: ko.observable(90)
+		};
+		ko.applyBindings(vm, $('#target')[0])
+	</script>
+	
+</body>
+</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.