HTML5 Drag & Drop API

maxbauer · #1 (**permalink**) 30.08.2012, 11:28

Hallo,

ich habe eine Frage zur HTML5 Drag & Drop API.

Ich wollte das ganze mal an einem Beispiel testen aber so richtig bekomme ich es leider nicht. Ich habe zwei Div- Container, die ich per DnD tauschen möchte.

Dazu mal ein kleines Beispiel:

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Drag & Drop Change</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            .box
            {
                width: 150px;
                height: 200px;
                border-style: solid;
                border-width: 1px;
                background-color: greenyellow;
                margin: 20px;
                padding: 0px;
                float: left;
                cursor: move;
            }
            .box header
            {
                background-color: royalblue;
            }
            .box:hover
            {
                border-style: dashed;
            }
        </style>
        <script type="text/javascript">
            var dragSrcEl = null;
            
            function dragStart(ev) 
            {                   
                dragSrcEl = this;
                ev.dataTransfer.effectAllowed='move';
                ev.dataTransfer.setData('text/html', this.innerHTML);
                return true;
            }       

            function dragEnter(ev) 
            {
                event.preventDefault();
                return true;
            }
            
            function dragOver(ev) 
            {
                return false;
            }
            
            function dragDrop(ev) 
            {
                ev.stopPropagation();
                dragSrcEl.innerHTML = this.innerHTML;
                this.innerHTML = ev.dataTransfer.getData('text/html');
                return false;
            }
            
        </script>
    </head>
    <body>
        <div align="center"><h1>Die HTML5 Drag & Drop API</h1></div>
        <div class="box" draggable="true"
             ondragstart="return dragStart(event)"
             ondragenter="return dragEnter(event)" 
             ondrop="return dragDrop(event)" 
             ondragover="return dragOver(event)">
            <header>Box A</header>
        </div>
        <div class="box" draggable="true"
             ondragstart="return dragStart(event)"
             ondragenter="return dragEnter(event)" 
             ondrop="return dragDrop(event)" 
             ondragover="return dragOver(event)">
            <header>Box B</header>
        </div>
    </body>
</html>

Der DnD Vorgang wir eingeleitet und ich kann den Container auch auf dem zweiten Container fallen lassen. Nur funktioniert der Austausch der beiden Container noch nicht.
Kann mir da jemand weiter helfen und sagen was ich verkehrt mache?
Die Daten vom Container der gezogen wird müssten ja im DataTransfer Objekt stehen.
Würde mich über Hilfe oder über ein gutes Beispiel im Internet freuen.

Grüße,

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
HTML5 Enthusiast (m/w)	ictjob.de	Jobs	0	28.08.2012 16:45
HTML5 Frage	Html5	(X)HTML	11	14.04.2012 11:03
Drag & Drop Problem Scroll Wert - IE 8	supercop89	Javascript & Ajax	2	31.05.2010 14:59
Drag & Drop - Frage	Malcom	Javascript & Ajax	1	14.12.2007 07:54
Programmierauftrag zu vergeben: Bilder markieren per AJAX Drag and Drop (entgeltlich)	unnuh.de	Offtopic	0	20.08.2007 00:59