Saf, Vanilla JavaScript ile Sürükle ve Bırak Öğeleri Oluşturma

Shreyas Patil2022-08-04 · 10 min read

Saf, Vanilla JavaScript ile Sürükle ve Bırak Öğeleri Oluşturma

JavaScript, 24'ten fazla framework ve yaklaşık 84 kütüphane ile güçlendirilmiş en popüler programlama dillerinden biridir. Tüm tarayıcılar tarafından yerleşik olarak desteklenen tek programlama dilidir. Ayrıca bu dil, dinamik yazımı destekler ve işleme (rendering) ile animasyon için mükemmel bir seçimdir. Ön uçta etkileşimli davranışlar eklemek, arka ucu kontrol etmek, web ve mobil uygulamalar oluşturmak ve daha fazlası için JavaScript'ten yararlanabilirsiniz. Herhangi bir web sitesine efekt ekleme ve onu özelleştirilebilir hale getirme seçeneği, bu dili dünya genelindeki geliştiriciler arasında favori yapmaktadır.

Bu kılavuzda, saf Vanilla JavaScript kullanarak sürükle ve bırak öğeleri oluşturma adımlarında size rehberlik edeceğiz. Ek olarak, bir adım daha ileri gideceğiz ve HTML Drag and Drop API olay işleyicilerini kullanarak bir “Sabah Planlayıcı” uygulaması oluşturacağız.

Gereksinimler

Bu eğitimi takip edebilmek için şunlara sahip olmalısınız:

Temel JavaScript bilgisi.
Şu konularda bilgi sahibi olmak HTML ve CSS büyük bir avantaj sağlayacaktır.

Adım 1: Yeni Bir Proje Oluşturun

İki alt öğeye sahip bir kapsayıcı oluşturarak başlayın. İlk alt öğeyi sürüklemek için, ikinci alt öğeyi ise sürüklenen öğeleri depolamak için kullanacağız.

Not: Bu eğitimde, kapsayıcıları sürüklenen tüm öğeleri tutacak bir depo olarak ele alacağız. Basit bir ifadeyle, ilk alt öğeden sürüklenen tüm öğeler ikinci alt öğeye bırakılacaktır.

$ mkdir drag-and-drop-demo

1	$ mkdir drag-and-drop-demo

Ardından, dizini cd komutunu kullanarak drag-and-drop-demo klasörüne değiştirin:

$ cd drag-and-drop-demo

1	$ cd drag-and-drop-demo

Adım 2: Başlangıç Kurulumu

Bu eğitimde HTML, CSS ve JavaScript dosyaları oluşturup bunları birbirine bağlayacağız. İlk olarak, dosyaları sırasıyla index.html, styles.css, ve scripts.js dosyaları olarak adlandırın.

Ardından, başlığı “My Morning Planner” olarak index.html dosyasına ekleyin:

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>My Morning Planner</title>
    </head>

    <body>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>My Morning Planner</title>

</head>

<body>

</body>

</html>

Ardından, CSS'i bağlayın ve JavaScript'i HTML'e ekleyin:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="styles.css">
        <script src="script.js" defer></script>
        <title>My Morning Planner</title>
    </head>

    <body>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>My Morning Planner</title>

</head>

<body>

</body>

</html>

Şimdi, ilk kapsayıcıyı oluşturacağız ve sürükleyip bırakmak istediğimiz öğeyi ekleyeceğiz. Özniteliği draggable="true", olarak ayarladığınızdan emin olun ve sürüklemek veya bırakmak istediğiniz öğelerin listesini ekleyin.

Ardından, <body> etiketlerinin arasına aşağıdaki kod satırlarını ekleyin:

<!DOCTYPE html>

<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    <title>Sabah Planlayıcım</title>
</head>

<body>
    <div class="container">
    <h1><center>SABAH PLANLAYICIM</center></h1>
    <h2 class="draggable" draggable="true">Spor Salonuna Git</h2>
    <h2 class="draggable" draggable="true">30 Dakika Kitap Oku</h2>
    <h2 class="draggable" draggable="true">Yulaf Ezmesi Hazırla</h2>
</div>

<div class="container">
    <h2 class="draggable" draggable="true">Soğuk Duş Al</h2>
    <h2 class="draggable" draggable="true">Günüme Başla</h2>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Sabah Planlayıcım</title>

</head>

<body>

<h1><center>SABAH PLANLAYICIM</center></h1>

<h2 class="draggable" draggable="true">Spor Salonuna Git</h2>

<h2 class="draggable" draggable="true">30 Dakika Kitap Oku</h2>

<h2 class="draggable" draggable="true">Yulaf Ezmesi Hazırla</h2>

</div>

<h2 class="draggable" draggable="true">Soğuk Duş Al</h2>

<h2 class="draggable" draggable="true">Günüme Başla</h2>

</div>

</body>

</html>

Lütfen index.html dosyasını kaydedip kapatın. Ardından, tarayıcınızda index.html dosyasını açmayı deneyin; bir sayfanın açıldığını göreceksiniz:

Ardından, CSS kullanarak index.html dosyamızı şekillendirelim ve sunulabilir görünmesini sağlayalım.

Adım 3: CSS kullanarak Şekillendirme

Ardından, index.html dosyamıza eklediğimiz tüm öğelere stiller ekleyin:

body {
    margin: 0;
}

.container {
    background-color: #DEB887;
    padding: 1rem;
    margin-top: 1rem;
}

.draggable {
    padding: 1rem;
    background-color: #FAF0E6;
    border: 1px solid #708090;
    cursor: move;
}

body {

margin: 0;

}

.container {

background-color: #DEB887;

padding: 1rem;

margin-top: 1rem;

}

.draggable {

padding: 1rem;

background-color: #FAF0E6;

border: 1px solid #708090;

cursor: move;

}

Tarayıcınızda index.html dosyasını açmayı deneyin ve çıktıyı görün:

Creating Drag and Drop Elements with Pure, Vanilla JavaScript 1

Yapılandırmayı tamamlamış ve stiller eklemiş olsak da, öğeler hala statiktir. Bu, onlara dinamik özellikler ekleyene kadar öğeleri hareket ettiremeyeceğimiz veya kaydıramayacağımız anlamına gelir. Bir sonraki adımda, JavaScript ve dinamik davranışları dahil edeceğiz.

Adım 4: JavaScript ile Tanışma

Bu adımda JavaScript'i tanıtacağız ve tüm sürükleme öğelerini işlevsel hale getireceğiz. JS dosyasında ihtiyacımız olacak öğeleri ayarlayalım. Sırasıyla öğeleri sürükleyip bırakmak için draggable ve containers öğelerini tanımlayalım.

Şu iki satır kodu scripts.js dosyasına ekleyin:

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

1 2	const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container')

Ardından, tüm olay dinleyicilerini ayarlayın. Sınıf listesine “dragstart” öğesini ilk olay dinleyicisi olarak ekleyerek add işlemini gerçekleştirin. Benzer şekilde, sınıf listesinden “dragend” öğesini ikinci olay dinleyicisi olarak ekleyerek remove işlemini gerçekleştirin.

Aşağıdaki EventListeners öğelerini scripts.js dosyanıza ekleyin:

const draggables = document.querySelectorAll('.draggable')
const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {
    draggable.addEventListener('dragstart', () => {
        draggable.classList.add('dragging')
    })

draggable.addEventListener('dragend', () => {
    draggable.classList.remove('dragging')
    })
})

const draggables = document.querySelectorAll('.draggable')

const containers = document.querySelectorAll('.container')

draggables.forEach(draggable => {

draggable.addEventListener('dragstart', () => {

draggable.classList.add('dragging')

})

draggable.addEventListener('dragend', () => {

draggable.classList.remove('dragging')

})

Ardından, öğelerimizi üzerinde gezdirmek ve hareket ettirmek için “dragover” EventListener olay dinleyicisini ekleyin. Mevcut draggable öğesini querySelector kullanarak ayarlayın ve ardından sürüklenebilir öğeyi mevcut kapsayıcıya ekleyin:

// …
containers.forEach(container => {
    container.addEventListener('dragover', () => {
        const draggable = document.querySelector('.dragging')
    })
})

// …

containers.forEach(container => {

container.addEventListener('dragover', () => {

const draggable = document.querySelector('.dragging')

})

Varsayılan olarak, bir öğenin içine bırakma devre dışıdır. Bunu etkinleştirmek için e.preventDefault kullanın:

// …
containers.forEach(container => {
    container.addEventListener('dragover', e => {
        e.preventDefault()
        const draggable = document.querySelector('.dragging')
        container.appendChild(draggable)
    })
})

// …

containers.forEach(container => {

container.addEventListener('dragover', e => {

e.preventDefault()

const draggable = document.querySelector('.dragging')

container.appendChild(draggable)

})

Ardından, fare konumunu belirlemek için bir öğe oluşturun. İki parametre alacak bir getDragAfterElement fonksiyonu oluşturarak başlayın. İlki bir container olacak ve ikinci parametre olan y farenin dikey konumuyla ilgilenecektir. Şimdi, sürüklenebilir öğelerimizi almak için querySelectorAll fonksiyonunu kullanın. Kapsayıcı içindeki tüm sürüklenebilir öğeler için bir draggableElements tanımlayın:

// …
function getDragAfterElement(container, y) {
    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]
}

// …

function getDragAfterElement(container, y) {

const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]

}

Ardından, sürüklenebilir öğeler listesi arasında döngü kuracak ve ayrıca fare imlecinden sonraki tek öğeyi belirleyecek bir reduce fonksiyonu çağırın. Ardından, ilk öğeyi return ifadesiyle reduce fonksiyonunu döndürün; burada ilk öğeyi closest ve ikinciyi bir child olarak ekleyin. Ayrıca, offset değerini eşitleyin ve koşulları ekleyin.

Aşağıdaki kod satırlarını scripts.js dosyasına ekleyin:

// …
    return draggableElements.reduce((closest, child) => {
        const box = child.getBoundingClientRect()
        const offset = y - box.top - box.height / 2
        if (offset < 0 && offset > closest.offset){
            return { offset: offset, element: child }
        } 
        else {
            return closest
        }
    }, { offset: Number.NEGATIVE_INFINITY}).element
}

// …

return draggableElements.reduce((closest, child) => {

const box = child.getBoundingClientRect()

const offset = y - box.top - box.height / 2

if (offset < 0 && offset > closest.offset){

return { offset: offset, element: child }

}

else {

return closest

}

}, { offset: Number.NEGATIVE_INFINITY}).element

}

Son bölümde, koşulları belirleyeceğiz ve AfterElements değerini kontrol edeceğiz. AfterElements değerini if-else koşullarını kullanarak kontrol edin ve eğer null olarak ayarlanmışsa, appendChild kullanarak listenin sonuna bir alt öğe ekleyin. Aksi takdirde, draggable ve afterElement öğelerini insertBefore fonksiyonuna parametre olarak ekleyin.

Bunu scripts.js dosyasına ekleyin:

// … 
containers.forEach(container => { 
    container.addEventListener('dragover', e =>{ 
        e.preventDefault() 
        const afterElement = getDragAfterElement(container, e.clientY) 
        const draggable = document.querySelector('.dragging') 
        if (afterElement == null) { 
            container.appendChild(draggable) 
        } 
        else {  
            container.insertBefore(draggable, afterElement) 
        } 
    }) 
})

// …

containers.forEach(container => {

container.addEventListener('dragover', e =>{

e.preventDefault()

const afterElement = getDragAfterElement(container, e.clientY)

const draggable = document.querySelector('.dragging')

if (afterElement == null) {

container.appendChild(draggable)

}

else {

container.insertBefore(draggable, afterElement)

}

})

Artık gerekli kurulumu tamamladık. Tarayıcınızı açın ve index.html dosyasını tarayıcınızda çalıştırın. “My Morning Scheduler” sayfasını sürükle ve bırak seçenekleriyle göreceksiniz. Ortadaki beyaz çizgi, halihazırda yapılmış olan görevler ile henüz yapılmamış olanları ayırt etmek için bir köprü görevi görür:

Sonuç

Sürükle ve Bırak, günümüz web sitelerinde kullanmak için mükemmel bir seçenektir. Bu kılavuzda, eğitimi yeni başlayanlar için kolaylaştırmak amacıyla birkaç olay işleyici kullandık. Toplamda sekiz olay işleyici bulunmaktadır ve ilerledikçe bunları kullanmanızı öneririz. Bu eğitimde kullanılan fonksiyonları ve kodları rahatça kullanmaya başladıktan sonra, jQuery gibi JavaScript konularına daha derinlemesine dalabilir ve keşfetmeye başlayabilirsiniz. Ayrıca, JavaScript tarih ve saat özelliklerini kullanarak bir Yapılacaklar (To-Do) uygulaması, haftalık ilerleme takipçisi ve yeni öğrendiğiniz kavramları kullanan diğer uygulamaları geliştirmeyi deneyebilirsiniz.

JavaScript ve web geliştirme konularında daha fazla bilgi edinmek için blogumuzdaki şu kaynaklara göz atın::

Keyifli Kodlamalar!

Shreyas Patil

Yazar · CloudSigma

Preslav Dobrev, CloudSigma'da Kreatif Tasarımcı olarak görev yapmakta olup geleneksel ve yenilikçi pazarlama kanallarını kullanarak tutarlı bir kurumsal kimlik oluşturmaya odaklanmaktadır. Sanatsal vizyonu stratejik pazarlamayla harmanlayarak etkili marka anlatıları oluşturma konusunda oldukça yeteneklidir.

Saf, Vanilla JavaScript ile Sürükle ve Bırak Öğeleri Oluşturma

Gereksinimler

Adım 1: Yeni Bir Proje Oluşturun

Adım 2: Başlangıç Kurulumu

Adım 3: CSS kullanarak Şekillendirme

Adım 4: JavaScript ile Tanışma

Sonuç

Shreyas Patil

Yorumlar