Tworzenie elementów przeciągnij i upuść za pomocą czystego, natywnego JavaScriptu

Shreyas Patil2022-08-04 · 10 min read

Tworzenie elementów przeciągnij i upuść za pomocą czystego, natywnego JavaScriptu

JavaScript to jeden z najpopularniejszych języków programowania, wyposażony w ponad 24 frameworki i około 84 biblioteki. Jest to jedyny język programowania natywnie obsługiwany przez wszystkie przeglądarki. Ponadto język ten obsługuje dynamiczne typowanie i doskonale nadaje się do renderowania oraz animacji. Możesz wykorzystać JavaScript, aby dodać interaktywne zachowania po stronie front-endu, kontrolować back-end, tworzyć aplikacje internetowe i mobilne i nie tylko. Możliwość dodawania efektów do dowolnej strony internetowej i jej personalizacji sprawia, że język ten jest ulubionym narzędziem programistów na całym świecie.

W tym poradniku przeprowadzimy Cię przez kroki tworzenia elementów typu „przeciągnij i upuść” przy użyciu czystego Vanilla JavaScript. Dodatkowo pójdziemy o krok dalej i zbudujemy aplikację „Morning Scheduler” przy użyciu HTML Drag and Drop API procedur obsługi zdarzeń.

Wymagania wstępne

Aby móc śledzić ten samouczek, musisz posiadać:

Podstawowa znajomość JavaScript.
Znajomość HTML oraz CSS będzie dodatkowym atutem.

Krok 1: Utwórz nowy projekt

Zacznij od utworzenia kontenera z dwoma elementami potomnymi. Pierwszego elementu potomnego użyjemy do przeciągania, a drugiego do przechowywania przeciągniętych elementów.

Uwaga: W tym samouczku będziemy traktować kontenery jako magazyn do przechowywania wszystkich przeciąganych elementów. Mówiąc najprościej, wszystkie elementy przeciągnięte z pierwszego elementu potomnego zostaną upuszczone do drugiego elementu potomnego.

$ mkdir drag-and-drop-demo

1	$ mkdir drag-and-drop-demo

Następnie użyj polecenia cd, aby zmienić katalog na drag-and-drop-demo folder:

$ cd drag-and-drop-demo

1	$ cd drag-and-drop-demo

Krok 2: Wstępna konfiguracja

W tym samouczku utworzymy pliki HTML, CSS i JavaScript oraz połączymy je. Najpierw nazwij te pliki jako index.html, styles.css, oraz scripts.js odpowiednio.

Następnie dodaj tytuł “My Morning Planner” w pliku index.html :

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

Następnie podłącz CSS i add JavaScript to HTML:

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

Teraz utworzymy początkowy kontener i dodamy element, który chcemy przeciągać i upuszczać. Upewnij się, że ustawisz atrybut draggable="true", i dodaj listę elementów, które chcesz przeciągać lub upuszczać.

Następnie dodaj następujące linie kodu wewnątrz <body> znaczników:

<!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>Mój poranny planer</title>
</head>

<body>
    <div class="container">
    <h1><center>MÓJ PORANNY PLANER</center></h1>
    <h2 class="draggable" draggable="true">Idź na siłownię</h2>
    <h2 class="draggable" draggable="true">Czytaj przez 30 minut</h2>
    <h2 class="draggable" draggable="true">Przygotuj owsiankę</h2>
</div>

<div class="container">
    <h2 class="draggable" draggable="true">Weź zimny prysznic</h2>
    <h2 class="draggable" draggable="true">Rozpocznij dzień</h2>
</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Mój poranny planer</title>

</head>

<body>

<h1><center>MÓJ PORANNY PLANER</center></h1>

<h2 class="draggable" draggable="true">Idź na siłownię</h2>

<h2 class="draggable" draggable="true">Czytaj przez 30 minut</h2>

<h2 class="draggable" draggable="true">Przygotuj owsiankę</h2>

</div>

<h2 class="draggable" draggable="true">Weź zimny prysznic</h2>

<h2 class="draggable" draggable="true">Rozpocznij dzień</h2>

</div>

</body>

</html>

Zapisz i zamknij plik index.html. Następnie spróbuj otworzyć plik index.html w przeglądarce, a zobaczysz otwierającą się stronę:

Następnie nadajmy styl naszemu plikowi index.html za pomocą CSS, aby wyglądał reprezentacyjnie.

Krok 3: Stylizowanie za pomocą CSS

Następnie dodaj style do wszystkich elementów, które zawarliśmy w naszym pliku index.html:

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;

}

Spróbuj otworzyć plik index.html w przeglądarce i zobacz wynik:

Creating Drag and Drop Elements with Pure, Vanilla JavaScript 1

Chociaż ukończyliśmy strukturę i dodaliśmy style, elementy są nadal statyczne. Oznacza to, że nie możemy przenosić ani przewijać elementów, dopóki nie dodamy do nich funkcji dynamicznych. W następnym kroku wprowadzimy JavaScript i dynamiczne zachowania.

Krok 4: Wprowadzenie JavaScript

W tym kroku wprowadzimy JavaScript i sprawimy, że wszystkie elementy przeciągane będą funkcjonalne. W pliku JS ustawimy elementy, których będziemy potrzebować. Zdefiniujmy draggable oraz containers odpowiednio do przeciągania i upuszczania elementów.

Dodaj te dwie linie kodu w pliku scripts.js:

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

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

Następnie skonfiguruj wszystkie detektory zdarzeń. Zacznij od dodania elementu “dragstart” jako pierwszego detektora zdarzeń, aby dodać do listy klas. Podobnie dodaj element “dragend” jako drugi detektor zdarzeń, aby usunąć z listy klas.

Dołącz następujące EventListeners w swoim pliku scripts.js:

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')

})

Następnie dodaj “dragover” EventListener do najeżdżania i przesuwania naszych elementów. Ustaw bieżący element draggable za pomocą querySelector a następnie dołącz przeciągany element do bieżącego kontenera:

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

// …

containers.forEach(container => {

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

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

})

Domyślnie upuszczanie wewnątrz elementu jest wyłączone. Użyj e.preventDefault, aby je włączyć:

// …
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)

})

Następnie utwórz element określający pozycję myszy. Zacznij od utworzenia funkcji getDragAfterElement, która będzie przyjmować dwa parametry. Pierwszym będzie container, a drugi parametr y zajmie się pozycją pionową myszy. Teraz użyj funkcji querySelectorAll, aby pobrać nasze przeciągane elementy. Zdefiniuj draggableElements dla wszystkich przeciąganych elementów wewnątrz kontenera:

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

// …

function getDragAfterElement(container, y) {

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

}

Następnie wywołaj funkcję reduce, która przejdzie w pętli przez listę przeciąganych elementów, a także określi pojedynczy element za kursorem myszy. Następnie zwróć wynik funkcji reduce, dodając pierwszy element jako closest a drugi jako child. Ponadto oblicz offset i dodaj warunki.

Dodaj następujące linie kodu w scripts.js pliku:

// …
    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

}

In the last part, we will set conditions and check the AfterElements. Sprawdź AfterElements za pomocą if-else warunków, a jeśli jest ustawiony na null, dołącz element potomny na końcu listy za pomocą appendChild. W przeciwnym razie dodaj element draggable oraz afterElement jako parametry w insertBefore funkcji.

Dołącz to w scripts.js pliku:

// … 
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)

}

})

Teraz mamy gotową niezbędną konfigurację. Otwórz przeglądarkę i uruchom index.html w swojej przeglądarce. Zobaczysz stronę „My Morning Scheduler” z opcjami przeciągania i upuszczania. Biała linia pośrodku działa jak mostek odróżniający zadania już wykonane od tych, które są jeszcze do zrobienia:

Podsumowanie

Przeciągnij i upuść (Drag and Drop) to doskonała opcja do wykorzystania na współczesnych stronach internetowych. W tym poradniku użyliśmy kilku procedur obsługi zdarzeń, aby ułatwić naukę początkującym. Łącznie istnieje osiem takich procedur i zachęcamy do korzystania z nich w miarę postępów. Gdy poczujesz się swobodnie z funkcjami i kodem użytym w tym samouczku, możesz zagłębić się w tematy związane z JavaScript, takie jak jQuery i zacząć eksperymentować. Możesz także spróbować zbudować aplikację To-Do, tygodniowy monitor postępów za pomocą funkcji daty i czasu w JavaScript oraz inne aplikacje, korzystając z pojęć, które właśnie poznałeś.

Aby dowiedzieć się więcej na temat JavaScript i tworzenia stron internetowych, sprawdź te zasoby z naszego bloga:

Miłego korzystania z komputera!

Shreyas Patil

Autor · CloudSigma

Preslav Dobrev jest projektantem kreatywnym w CloudSigma, skupiającym się na spójnej tożsamości biznesowej przy wykorzystaniu tradycyjnych i innowacyjnych kanałów marketingowych. Biegle łączy wizję artystyczną ze strategicznym marketingiem, tworząc wywierające wpływ narracje marki.

Tworzenie elementów przeciągnij i upuść za pomocą czystego, natywnego JavaScriptu

Wymagania wstępne

Krok 1: Utwórz nowy projekt

Krok 2: Wstępna konfiguracja

Krok 3: Stylizowanie za pomocą CSS

Krok 4: Wprowadzenie JavaScript

Podsumowanie

Shreyas Patil

Komentarze