Sortable.js – Html5 sürükle-bırak sıralama

Ali  Farhadi tarafından yapılmış  olan Html5 Sortable  uygulaması  Wordpress benzeri sürükle  bırak örnekleri oluşturmanıza  ve kullanmanıza  olanak  sağlıyor. WordPress blogcuların yakından tanıdığı  bu özellik  bileşenler  sekmesinde  sürükle bırak yöntemi ile bir  bileşeni bileşen alanına  taşımaya yarıyor. WordPress sisteminde  bu özellik bir de  menü oluşturma  bölümünde  kullanılmış. WordPress kullanıcıları için  maksimum kolaylık  sağlayan bir özellik.

Demo sayfasında Sortable ile  hazırlanmış iki adet demo bulunuyor. Bir tanesinde menü şeklinde  diğeri de grid şeklinde hazırlanmış. Aynı yapboz gibi hangisinin taşırsanız taşıdığınız yerdeki nesne ile yer değiştiriyor.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.sortable.js"></script>

 Javascript : 

	<script>
		$(function() {
			$('.sortable').sortable();
			$('.handles').sortable({
				handle: 'span'
			});
			$('.connected').sortable({
				connectWith: '.connected'
			});
			$('.exclude').sortable({
				items: ':not(.disabled)'
			});
		});
	</script>

 Stil : 

Demo sayfasnının kodlarıdır.

	<style>
		header, section {
			display: block;
		}
		body {
			font-family: 'Droid Serif';
		}
		h1, h2 {
			text-align: center;
			font-weight: normal;
		}
		#features {
			margin: auto;
			width: 460px;
			font-size: 0.9em;
		}
		.connected, .sortable, .exclude, .handles {
			margin: auto;
			padding: 0;
			width: 310px;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.sortable.grid {
			overflow: hidden;
		}
		.connected li, .sortable li, .exclude li, .handles li {
			list-style: none;
			border: 1px solid #CCC;
			background: #F6F6F6;
			font-family: "Tahoma";
			color: #1C94C4;
			margin: 5px;
			padding: 5px;
			height: 22px;
		}
		.handles span {
			cursor: move;
		}
		li.disabled {
			opacity: 0.5;
		}
		.sortable.grid li {
			line-height: 80px;
			float: left;
			width: 80px;
			height: 80px;
			text-align: center;
		}
		li.highlight {
			background: #FEE25F;
		}
		#connected {
			width: 440px;
			overflow: hidden;
			margin: auto;
		}
		.connected {
			float: left;
			width: 200px;
		}
		.connected.no2 {
			float: right;
		}
		li.sortable-placeholder {
			border: 1px dashed #CCC;
			background: none;
		}
	</style>

Body etiketleri arasına eklemeniz gereken bölüm.

Liste :

<section>
	<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>
	</ul>
</section>

Grid :

<section>
	<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>
	</ul>
</section>

• Destekleyen Tarayıcılar : IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+ and, Opera 12+.
• Lisans : MIT lisansı.