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...