metecik
diff --git a/‎index.html‎
Lines changed: 83 additions & 0 deletions b/‎index.html‎
Lines changed: 83 additions & 0 deletions
diff --git a/‎jquery.sortable.js‎
Lines changed: 44 additions & 0 deletions b/‎jquery.sortable.js‎
Lines changed: 44 additions & 0 deletions
@@ -0,0 +1,83 @@
+<!doctype html>
+<head>
+	<meta charset="utf-8">
+	<title>HTML5 Sortable jQuery Plugin</title>
+	<style>
+		h1, h2 {
+			text-align: center;
+		}
+		ul {
+			margin: auto;
+			padding: 0;
+		}
+		.sortable.list {
+			width: 300px;
+		}
+		.sortable.grid {
+			width: 410px;
+			overflow: hidden;
+		}
+		.sortable li {
+			list-style: none;
+			border: 1px solid #CCC;
+			background: #F6F6F6;
+			font: normal 1em "Tahoma";
+			color: #1C94C4;
+			margin: 5px;
+			padding: 5px;
+			height: 22px;
+		}
+		.sortable.grid li {
+			line-height: 80px;
+			float: left;
+			width: 80px;
+			height: 80px;
+			text-align: center;
+		}
+		li.sortable-placeholder {
+			border: 1px dashed #CCC;
+			background: none;
+		}
+	</style>
+</head>
+
+<body>
+	<header>
+		<h1>HTML5 Sortable jQuery Plugin</h1>
+	</header>
+	<article>
+		<h2>Sortable List</h2>
+		<ul class="sortable list">
+			<li>Item 1</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+			<li>Item 4</li>
+			<li>Item 5</li>
+			<li>Item 6</li>
+			<li>Item 7</li>
+			<li>Item 8</li>
+		</ul>
+	</article>
+	<article>
+		<h2>Sortable Grid</h2>
+		<ul class="sortable grid">
+			<li>Item 1</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+			<li>Item 4</li>
+			<li>Item 5</li>
+			<li>Item 6</li>
+			<li>Item 7</li>
+			<li>Item 8</li>
+		</ul>
+	</article>
+	<a href="http://github.com/farhadi/html5sortable"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/edc6dae7a1079163caf7f17c60495bbb6d027c93/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub"></a>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script src="jquery.sortable.js"></script>
+	<script>
+		$(function() {
+			$('.sortable').sortable();
+		});
+	</script>
+</body>
+</html>
@@ -0,0 +1,44 @@
+/*
+ * HTML5 Sortable jQuery Plugin
+ * http://farhadi.github.com/html5sortable
+ * 
+ * Copyright 2012, Ali Farhadi
+ * Released under the MIT license.
+ */
+jQuery.fn.sortable = function() {
+	return this.each(function() {
+		var $ = jQuery, dragging, dropHandler, dragHandler, items = $(this).children();
+		var dropHandler = function(e) {
+			if (!dragging) return true;
+			e.stopPropagation();
+			placeholder.after(dragging);
+			return false;
+		}; 
+		var dragHandler = function(e) {
+			if (!dragging) return true;
+			e.preventDefault();
+			e.originalEvent.dataTransfer.dropEffect = 'move';
+			if (this !== placeholder[0] && this !== placeholder.parent()[0]) {
+				dragging.hide();
+				$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
+			}
+			return false;
+		};
+		var placeholder = $('<' + items[0].tagName + '>').addClass('sortable-placeholder')
+			.bind('dragover', dragHandler).bind('drop', dropHandler);
+
+		items.attr('draggable', 'true').bind('dragstart', function(e) {
+			var dt = e.originalEvent.dataTransfer;
+			dt.effectAllowed = 'move';
+			dt.setData('Text', 'dummy');
+			dragging = $(this).addClass('sortable-dragging');
+		}).bind('dragend', function() {
+			dragging.removeClass('sortable-dragging').fadeIn();
+			placeholder.detach();
+			dragging = null;
+		}).not('a[href], img').bind('selectstart', function() {
+			this.dragDrop && this.dragDrop();
+			return false;
+		}).end().add(this).bind('dragover dragenter', dragHandler).bind('drop', dropHandler);
+	});
+};