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>Burada taşınabilirlik özelliÄŸi vereceÄŸimiz tasinabiliralan nesnesinin css özelliklerini tanımladık. Åžimdi html kodumuza geçelim.
#tasinabiliralan {
width:200px;
height:200px;
position:relative;
background-color:#01A1FE;
font-family:Tahoma;
color:#ffffff;
padding:20px;
font-size:27px;
cursor:move;
}
</style>
<div id="tasinabiliralan">Åžimdi asıl iÅŸlevi yerine getirecek kodlarımız olan javascript kodlarımıza geçiyoruz.
Taşınabilir Alan
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></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…
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#tasinabiliralan" ).draggable();
});
</script>
1 Yorum
Cengiz Tan
Çok teÅŸekkürler. Güzel bir paylaşım...