jQuery kullanarak elementler üzerinde resizable ve draggable nasıl yapılır ?
Bu makalemizde bu sorunun cevabını vermeye çalışacağız.
Öncelikle uygulamamızın html kodlarının içinde head etiketleri arasına aşağıdaki kodları yazıyoruz.
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“></script>
Aslında yukarıdaki jQuery kodlarını başka bir sunucu üzerinden çekmek çok mantıklı bir yöntem değil. Bu linkten kodları alıp proje dizini içne jQuery dosyası olarak yapıştırılıp kaydedilmesi tavsiye edilir.
Sırada CSS kodlarımızı yazmaya geldi. Css kodlarımızı yine aynı şekilde head etiketleri arasına yazıyoruz.
| <STYLE> | ||||||
| .demo { | ||||||
| width:150px; | ||||||
| height:150px; | ||||||
| padding:5px; | ||||||
| background-color:#ff8811; | ||||||
| position:absolute; | ||||||
| top:150px; | ||||||
| left:300px; | ||||||
| } | ||||||
|
|
Sıradaki işlem yazdığımız jQuery ve Css kodlarını kullanarak elementin gösterileceği div etiketlerini oluşturmaktır. div etiketini sayfada gösterilmesini istediğimiz alana <body> etiketleri içinde yazıyoruz.
<div class=”demo”>Mansur İşçel</div>
Son olarak aşağıdaki Javascript fonksiyonumuzu <body> etiketinin altına yazıyoruz.
| <SCRIPT> | |||||
| $(function(){ | |||||
| $(‘.demo’) | |||||
| .draggable() | |||||
| .resizable(); | |||||
| }); | |||||
| </SCRIPT> |
İşte hepsi bu kadar… Mümkün olduğunca yalın ve açık anlatmaya çalıştım umarım işinize yarar.
Kolay gelsin…
DEMO için tıklayınız…
Mansur İşçel
www.mansuriscel.blogspot.com

Son Yorumlar