jQuery UI Touch Punch Mobil Sorunu

jQuery UI Touch Punch Mobil Sorunu

jQuery ile sürükle bırak işlemleri draggable kullanılmaktadır. Draggble ile tarayıcı üzerinde belirlediğiniz objelerin yerlerini oynatabilirsiniz. Sürükle bırak işlemleri için jQuery kütüphanesi dahil edildikten sonra jqueryui.com sitesi üzerinden elde edilen JS dosyasıda dahil edilmelidir. İki JS dosyasıda sayfaya dahil edildikten sonra gerekli sürükleme işlemi yapılabilir.

<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script> 
$( function() {  
   $( "#draggable" ).draggable();
} );
</script>
</head>
<body>
  <div id="draggable" class="ui-widget-content">
     <p>Kutuyu sürükleyiniz</p>
   </div>
</body>
</html>

Yukarıdaki örnekte, CSS ile biçimlendirilen DIV etiketi, draggable ile sürüklenebilir hale gelecektir. Fakat bu işlem sadece tarayıcı üzerinde sağlıklı bir şekilde çalışmasını sürdürecektir. Mobil cihazlarda bu işlemin sorunsuzca çalışması için ekstra bir JS dosyasına ihtiyaç vardır. Mobil cihazlarda yer alan sorunu çözmek için http://touchpunch.furf.com/ sitesinden indireceğiniz JS dosyasını sayfaya dahil etmeniz gerekecektir. İndirmiş olduğunuz eklentiyi sayfaya dahil ettiğinizde draggable işlevini sorunsuzca kullanabilirsiniz.

Bir önceki yazım olan jQuery İle Scroll İndikçe İlerleme Çubuğu Hazırlama başlıklı makalemi de okumanızı öneririz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir