jQuery Resizable Draggable

jQuery Resizable Draggable, Javascript kullanarak Mause ile elementleri hareket ettirmeyi öğrenelim.

jQuery Resizable Draggable, Javascript kullanarak Mause ile elementleri hareket ettirmeyi öğrenelim.

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>  



<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"/>




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;



}



</STYLE>



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 etiketleri içinde yazıyoruz.


<div class="demo">Mansur İşçel</div>



Son olarak aşağıdaki Javascript fonksiyonumuzu 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 İÇİN TIKLAYIN.
  • Etiketler;
Miscel Miscel
Sanalkurs.net
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

güzel bi noktaya değinmşsiniz teşekkürler. kendi açılır kapanır popup larımız geliştirebiliriz sanırım

Yukarı Git