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…