NemProgrammering.dk logo
nordicway webhotel

HTML5 - Drag and Drop

HTML5 kursus | Lær at anvende HTML5
WordPress hjemmeside hjælp

Information om denne video

Underviser: Joakim Børlum Petersen, www.Snowhat.dk

Træk og slip eller på engelsk "Drag and drop" (DND) er et kraftfuldt brugergrænseflade-koncept, som gør det nemt at kopiere, flytte og slette elementer ved hjælp af et klik og en bevægelse med musen. Brugeren kan altså holde musen nede over et element, trække det til en anden lokation på siden, og her slippe og eventuelt placere det i stedet.

For at opnå drag and drop-funktionalitet med traditionel HTML4, ville en udvikler enten være nød til at bruge kompleks JavaScript programmering eller andre Javascript frameworks, såsom jQuery mv.

Nu er HTML 5 dog kommet på banen med en Drag and Drop (DND) API, der gør det meget nemmere at kode en simpel drag and drop applikation via indbyggede JavaScript funktioner og events.

I denne video viser Joakim, hvordan det mest basale drag and drop fungerer i HTML5. Han vil blandt andet komme ind på og bruge de indbyggede API events; dragstart og dragend.

Herunder kan du også se et eksempel på, hvad der faktisk er muligt med HTML5 drag and drop:

Eksempel

Herunder finder du koderne der bliver lavet i videoen - Kopier dem gerne!

Video tags:

Denne video relaterer til emner såsom: HTML5 kursus, HTML5 guide, Gratis HTML5 undervisning, HTML5 video tutorials på dansk, HTML5 introduktion, muligheder med HTML5, HTML5, drag and drop, træk og slip

Her har du kildekoden

<!DOCTYPE html>
<html>
<head>
    <title>Træk og slip</title>
    <meta charset="utf-8">
    <style>
    .box {
        height: 150px;
        width: 150px;
        margin: 10px;
        float: left;
        cursor: move;
        background: #BADA55;
    }
    </style>
</head>
<body>
    <div class="box" draggable="true" id="1"></div>
    <div class="box" draggable="true" id="2"></div>
    <div class="box" draggable="true" id="3"></div>
    <script>
        function handleDragstart(e){
            this.style.background = '#A55A55';
        }

        function handleDragend(e){
            this.style.background = '#A55BAD';
        }

        var boxes = document.querySelectorAll('.box');
        [].forEach.call(boxes, function(box){
            box.addEventListener('dragstart', handleDragstart, false);
            box.addEventListener('dragend', handleDragend, false);
        });
    </script>
</body>
</html>

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    07-09-2014

Hej Khaled, Du kan downloade alle videoer her: http://www.nemprogrammering.dk/wp/downloads/produkter/ Det koster dog et mindre beløb per serie.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Khaled    07-09-2014

Kan i ikke lave en zip fil hvor man kan downloade jeres videoer både på telefonen og pc så hvis man ikke har net og ikke noget at lave kan man se videoerne ?

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Jacob    18-02-2014

Ahhhh smart. Tusind tak for svaret... og alle videoerne for den sags skyld.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    17-02-2014

Hej Jacob, Det gør vi ikke fordi en rtmp player er mere sikker i forhold til kopiering og download af videoer. Med en html5 player kan alle og enhver downloade den video der afspilles. Mvh. Thomas

kommentar på NemProgrammering.dk - lav din egen hjemmeside
jacob    17-02-2014

Hvorfor bruger i ikke selv html5 video player?

kommentar på NemProgrammering.dk - lav din egen hjemmeside
scootergrisen    29-06-2012

Det jo fint nok du ikke omtale hvilke browsere det virker i i videoen det snak bliver alligevel hurtigt forældet jeg tænker bare at skrive det under video at det kun virker i den og den browser og version så kan du let opdater det der står under videoen også uden at skulle lave en ny video med ændringer.

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Joakim    29-06-2012

Sorry - det har du helt ret i. Det glemte jeg at omtale :)

kommentar på NemProgrammering.dk - lav din egen hjemmeside
scootergrisen    29-06-2012

Så blev jeg da lidt klogere. Syntes godt nok drag and drop er noget af det sværreste. Skriv eventuelt gerne i kommentar under videoen hvilke browsere det virker og ikke virker i fordi det er ikke ud til dragend eventuen virker i Firefox 13.0.1 også sidder man måske der og kan ikke forstå det ikke virker. Nu vidste jeg godt det ikke er det hele der virker i alle browserne men hvis man sidde med Firefox og ikke kan få koden til at virke så ville det være rart der lige var en kommentar om det... men det er der jo så nu :O)