HTML5 - Drag and Drop

Drag and Drop elementi

HTML5 povlačenja i ispuštanja (Drag and Drop) omogućava korisniku da povuče i ispušta element na drugo mjesto. Dok povlačite element, prozirni prikaz elementa sljedi pokazivač miša. Isprobajmo sljedeći primjer da bismo razumjeli kako to u osnovi funkcioniše: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Korištenje Drag and Drop</title>
<script>
    function dragStart(e) {
        // Postavlja operaciju dozvoljenu za izvor povlačenja
        e.dataTransfer.effectAllowed = "move";
    
        // Postavlja vrijednost i vrstu povučenih podataka
        e.dataTransfer.setData("Text", e.target.getAttribute("id"));
    }
    function dragOver(e) {
        // Spriječite zadano rukovanje podacima preglednika
        e.preventDefault();
        e.stopPropagation();
    }
    function drop(e) {
        // Otkažite ovaj događaj svima ostalima
        e.stopPropagation();
        e.preventDefault();
    
        // Dohvatite povučene podatke prema tipu
        var data = e.dataTransfer.getData("Text");
    
        // Dodajte sliku u padajući okvir
        e.target.appendChild(document.getElementById(data));
    }
</script>
<style>
    #dropBox {
        width: 300px;
        height: 300px;
        border: 5px dashed gray;
        background: lightyellow;
        text-align: center;
        margin: 20px 0;
        color: orange;
    }
    #dropBox img {
        margin: 25px;
    }
</style>
</head>
<body>
    <h2>Drag and Drop Demo</h2>
    <p>Drag and drop slika u padajućem okvir:</p>
    <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
        <!--Ovdje će biti umetnuta ispuštena slika-->
    </div>
    <img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" 
width="250" height="250" alt="Flying Kites">
</body>
</html>

Drag and Drop Events (događaji)

Brojni događaji pokreću se u različitim fazama operacije povlačenja i ispuštanja (Drag and Drop). Ali događaji miša kao što je pomicanje miša ne aktiviraju se tokom operacije povlačenja. Sljedeća tabela pruža vam kratak pregled svih povlačenja i ispuštanja (Drag and Drop).

Event (događaj) Opis
ondragstart Aktivira se kada korisnik počne povlačiti element.
ondragenter Aktivira se kada se element koji se može povući prvi put premjesti.
ondragover Aktivira se kada korisnik povuče element preko drop listener-a.
ondreagleave Aktivira se kada korisnik povuče element iz drop listener-a.
ondrag Aktivira se kada korisnik povuče element bilo gdje. Neprestano se pali, ali može dati X i Y koordinate pokazivača miša.
ondrop Aktivira se kada korisnik uspješno ispušta element u drop listener.
ondragend Aktivira se kada je akcija povlačenja završena, bez obzira da li je bila uspješna ili ne. Ovaj se događaj ne pokreće prilikom povlačenja datoteke u pretraživač sa radne površine.