“Bazı şeylerin gitmesine izin vermek işte bu nedenle çok önemlidir. Onları serbest bırakmak. Gevşek olanı kesmek. İnsanların hiç kimsenin işaretli kağıtlarla oynamadığını anlaması gerekiyor; bazen kazanırız ve bazen kaybederiz. Hiçbir şeyi ger almayı bekleme, yaptıkların için takdir edilmeyi bekleme, ne kadar zeki olduğunun keşfedilmesini bekleme ya da aşkının anlaşılmasını. Daireyi tamamla. Gururlu, yetersiz ya da kibirli olduğun için değil, sadece artık onun senin yaşamında yeri olmadığı için. Kapıyı kapat, plağı değiştir, evi temizle, tozdan kurtul. Geçmişte olduğun kişi olmayı bırak ve şu an kimsen o ol.”
by Paulo Coelho - Zahir S. 204

JQuery ile Sürükle Bırak ve Yeniden Boyutlandırma

Tarih: Ocak 31st, 2010 | Yazar: | Kategoriler: jQuery | Etiketler: , , | Yorum Yok »

Bu yazımda JQuery ile herhangi bir elementin ekran üzerindeki yerini değiştirmeyi ve boyutu değiştirmeyi anlatacağım. Bunun için JQuery yanında JQuery UI sınıfını kullancağız bu yüzden aşağıdaki dosyaları sayfamıza dahil etmemiz gerekiyor.

Gerekli Dosyaları Sayfamıza Dahil Edelim

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

ui.css dosyasını olmazsa olmaz değildir isterseniz kendi css dosyanızda kendi stillerinizi kullanarak sürüklenip bırakılacak elementi özelliklerini değiştirebilirsiniz.

Element Tanımlama

Sayfamızdaki hangi elementi sürükle bırak ve boyutlandırma özelliğini kazandırmak istiyoruz öncelikle bunu belirlememiz lazım. Eğer birden fazla elemente aynı özellikleri kazandırmak istiyorsak sınıf kullanmamız daha doğru olacaktır durum tam tersi ise sınıf yerine kimlik(identity) kullanmamız daha doğru olacaktır. Ben #resizeDiv olarak tanımladığım elementi kullanacağım.

<div id="resizeDiv">Sürükle Bırak &amp; Boyutlandır</div>

Elementi tanımladıktan sonra bu elementi sürüklenip bırakılması için bazı stil özellikleri vermemiz gerekiyor. Kısacası position özelliğini absolute yaparak elementin yeri tanımlandığı yerde değilde bizim istediğimiz yerde görebiliriz. Gerekli stil kodu aşağıda.

#resizeDiv {
	width:150px;
	height:150px;
	padding:5px;
	background-color:#ff8811;
	position:absolute;
	top:0px;
	left:0px;
}

Elementi Sürükle Bırak ve Boyutlandırma Özelliği Kazandıralım

Elementin stil özelliklerini kazandırdıktan sonra yapmamız gereken tek şey UI sınıfının bize sunduğu draggable ve resizable nesnelerini kullanmak olacak. Kullanım şekli oldukça basit aşağıda kodlarını görebilirsiniz.

$(document).ready(function() {
	$('#resizeDiv')
	.draggable()
	.resizable();
});

Hepsi bu kadar ancak bunun yetinmek istemiyorsanız bu nesnelerin parametrelerini değiştirmek istiyorsanız aşağıdaki linkleri kullanabilirsiniz. Yada çalışan bir demo görmek istiyorsanız demo linkinden faydalanabilirsiniz.

Demo


http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/resizable/