1. Ana Sayfa
  2. Teknoloji
  3. Wordpress Tarzı Sürükle Bırak Liste Yapımı!

Wordpress Tarzı Sürükle Bırak Liste Yapımı!

featured

Biliyorsunuz ki Wordpress denince akla ilk gelen sürükle-bırak metodu olur. Hiçbir kodlama bilmeden istemediğiniz liste elemanını kulağından tutup listeden çıkarabilirsiniz. Çok havalı gözüküyor öyle değil mi? Fakat bir o kadar da basit bir eylem. Haydi bu yazımızda, Jquery UI kütüphanesini kullanarak bir sürükle-bırak liste yapalım! Wordpress Tarzı Sürükle Bırak Liste Yapımı!

Ayrıca Okuyun: Jquery ile Kaydırma Efekti Yapmak!

Adım 1: Bir HTML Dökümanı Açalım ve HTML5
İskeletimizi Oluşturalım!

Ben hemen bir index.html dosyası açtım ve iskeletimi oluşturdum. Sıra sizde.

<!DOCTYPE HTML>
<html>
<head>
<title>Sıralanabilir Liste</title>
<meta charset="UTF-8"/>
</head>
<body>

</body>
</html>

Adım 2: Jquery ve Jquery UI Kütüphanesini Sayfamıza Dahil Edelim!

Mobilde Çalışması İçin Js Plugin’i İndir

Bu js dosyasını indirip index.html dosyasının bulunduğu dizine yapıştırın.

Aşağıda vereceğim kodları head bölümüne ekleyin ve diğer adıma geçin.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

Adım 3: Bir Liste Oluşturalım ve Eleman Ekleyelim!

Ben sıradan bir liste oluşturdum ve class’ına liste adını verdim. Siz herhangi bir class verebilirsiniz. Yine aynı şekilde liste elemanlarına da liste-elemani adını verdim.

<ul class="liste">
<li class="liste-elemani">Eleman 1</li>
<li class="liste-elemani">Eleman 2</li>
<li class="liste-elemani">Eleman 3</li>
</ul>

Adım 4: Listemize Biraz Stil Verelim!

Ben çok sade durmaması açısından biraz stil ekledim. Gayet şık duruyor ;)

Wordpress Tarzı Sürükle Bırak Liste Yapımı!
Sıralanabilir Liste

Adım 5: Listemizi Sıralanabilir(Sortable) Yapalım!

<script>
$(document).ready(function(){

$(".liste").sortable();

});
</script>

İşte bu kadar! Artık listemizi sıralanabilir yapabiliriz. Bunun için aşağıdaki kodu kendinize göre ayarlayabilirsiniz.

.liste yazan yere kendi oluşturduğunuz listenizin class’ını yazmanız gerekiyor.

Ayrıca Okuyun: Donald Trump’ın Facebook Hesabının Kaderi Bağımsız Uzmanlar Tarafından Karar Verilecek!

Bu yazıyı değerlendirmek için tıklayın!
[Toplam: 0 Ortalama: 0]

Yorum Yap

Yazar Hakkında

Ömer iyi çocuktu ama fena bir kusuru vardı. İnsanlara fazla güveniyordu. Sırf seviyor diye onları tanıdığını zannediyordu. Eğer geri dönüp söyleyebilseydim söylerdim. Ömer derdim her ihanet sevgi ile başlar.

Yorum Yap

Yorumlar (1)

  1. Güzel anlatım olmuş

Bir cevap yazın

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