zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden HTML5 Drag & Drop API

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.08.2012, 11:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2011
Beiträge: 3
maxbauer befindet sich auf einem aufstrebenden Ast
Standard HTML5 Drag & Drop API

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,

Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
data transfer, drag and drop, html 5

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:30 Uhr.