Merhaba arkadaÅŸlar. Bu makalemde sizlere jquery ile nesne sürükleme, taşıma iÅŸlemini anlatacağım. Bu iÅŸlemi jquery’nin içinde barındırdığı draggable fonksiyonu ile yapacağız. Fonksiyonun en temel kullanımı anlatılacaktır. Ä°lk olarak css kodlarından baÅŸlayacağım. Sonrasında html ve en son olarak javascript kodlarımızı yazacağım.

<style>

#tasinabiliralan {

width:200px;

height:200px;

position:relative;

background-color:#01A1FE;

font-family:Tahoma;

color:#ffffff;

padding:20px;

font-size:27px;

cursor:move;

}

</style>

Burada taşınabilirlik özelliÄŸi vereceÄŸimiz tasinabiliralan nesnesinin css özelliklerini tanımladık. Åžimdi html kodumuza geçelim.

<div id="tasinabiliralan">

Taşınabilir Alan

</div>

Åžimdi asıl iÅŸlevi yerine getirecek kodlarımız olan javascript kodlarımıza geçiyoruz.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script>

 $(function() {

$( "#tasinabiliralan" ).draggable();

});

</script>

Burada öncelikle gerekli kütüphaneleri sayfamıza dahil ettik. Daha sonra fonksiyonumuzu yazarak tasinabiliralan nesnemize taşınabilirlik, sürüklenebilirlik özelliÄŸini vermiÅŸ olduk. Yararlı olması dileÄŸiyle. Sonraki makalelerde görüÅŸmek üzere…