Jquery Draggable ile Nesneye Sürüklenebilirlik ÖzelliÄŸi Verme
Javascript

Jquery Draggable ile Nesneye Sürüklenebilirlik ÖzelliÄŸi Verme

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…


author

Aykut ErdoÄŸan

jquery, draggable, function

  • Bu Yazılara da Gözat:

    1 Yorum

    author

    Cevapla