HTML Drag and Drop auf iPad

[Cool Master]

Moin,

mal eine Frage:

Ist es möglich auf einem iPad/iPhone bzw. allgemein Tablet ein Drag and Drop Element zu haben?

Ich nutze aktuell dieses Prinzip:

http://www.w3schools.com/html/html5_draganddrop.asp

Auf dem Desktop klappt das auch wie eine Eins. Auf dem iPad Simulator unter OS X leider nicht. Da ich aktuell kein iPad vor mir habe kann ich es nicht direkt auf einem echten testen, aber ich nehme mal stark an, dass es auch unter dem echten nicht klappen wird.

 

[DaVian]

Das liegt daran, dass die Events unterschiedlich sind. Für den Desktop gibt es ja das drop und dragstart usw.
Im mobile Safari müsstest du touchstart, touchmove usw verwenden.

Vlt hilft dir ja das weiter: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

 

[Cool Master]

Im mobile Safari...

Klappt das mit jedem WebKit Browser?

Vlt hilft dir ja das weiter: http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

Danke, schon mal für den Link. Leider schon etwas älter (2008), evtl. gibt es da ja was neueres.

 

[DaVian]

Die Touch Events sollten auf allen mobilen Browsern funktionieren.

Der Link kam von 5 Sekunden google Suche ;-)

 

[Cool Master]

Ja, den Link habe ich auch gefunden aber wie gesagt der ist halt aus 2008 evtl. hat sich da in der Zeit (sind ja immerhin 6 Jahre) etwas geändert.

Edit:

Es gibt was neueres

http://touchpunch.furf.com/

 

[ice-breaker]

touchstart ist immernoch aktuell, da hat sich nix geändert.
du hast jetzt nur eine der hundert libraries gefunden, die desktop&mobile unter eine gleiche API bringen bzw. die touch-Events auf die Desktop-Events mappen.

 

[Cool Master]

Hmm will alles nicht wie es soll

Ich poste mal etwas Code evtl. kann mir jemand weiter helfen.

Was ich erreichen möchte ist: Wie ich nun das Look and Feel von diesem Desktop Drag & Drop auf dem iPad bekomme.

Alles was ich bis jetzt gefunden habe war nur mit absolute gesetzen divs welche ich auf der Seite, die ich baue, nicht brauche da ein responsive Design zum Einsatz kommt.

Mein CSS:

#drag-and-drop-left{
    float: left;
    height: auto;
    width: 49%;
}

#drag-and-drop-right{
    float: right;
    height: auto;
    width: 49%;
}

.dragdrop-hidden{
    display: none;
}

.dragdrop-show{
    display: block !important;
}

#dragdrop-possible{
    height: auto;
    margin: 10px;
    max-width: 100%;
    padding: 10px;
    width: auto;    
}

#dragdrop-possible p{
    border: 1px solid #808080;
}

.draganddropdiv{
    border: 1px solid #808080;
    height: auto;
    margin: 5px;
    padding: 10px;
    width: 90%;
}

.draganddropp{
    cursor: pointer;
}

.clear{
    clear: both;
}

HTML+JS

            <div id="drag-and-drop-left">
                <div class="draganddropdiv" id="div1-l" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                <div class="draganddropdiv" id="div2-l" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                <div class="draganddropdiv" id="div3-l" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
                <div class="draganddropdiv" id="div4-l" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
            <div class="dragdrop-hidden" id="drag-and-drop-right">
                <div class="draganddropdiv" id="div1-r"><p>{{ selbstkontrollaufgabe.antwort1_dd }}</p></div>
                <div class="draganddropdiv" id="div2-r"><p>{{ selbstkontrollaufgabe.antwort2_dd }}</p></div>
                <div class="draganddropdiv" id="div3-r"><p>{{ selbstkontrollaufgabe.antwort3_dd }}</p></div>
                <div class="draganddropdiv" id="div4-r"><p>{{ selbstkontrollaufgabe.antwort4_dd }}</p></div>
            </div>
            <br class="clear">
                <p class="draganddropp" id="drag1" draggable="true" ondragstart="drag(event)">{{ selbstkontrollaufgabe.antwort1_dd }}</p>
                <p class="draganddropp" id="drag2" draggable="true" ondragstart="drag(event)">{{ selbstkontrollaufgabe.antwort2_dd }}</p>
                <p class="draganddropp" id="drag3" draggable="true" ondragstart="drag(event)">{{ selbstkontrollaufgabe.antwort3_dd }}</p>
                <p class="draganddropp" id="drag4" draggable="true" ondragstart="drag(event)">{{ selbstkontrollaufgabe.antwort4_dd }}</p>        
        <input id="button" class="loesung-button" type="button" onclick="" value="Musterlösungen" name="button"></input>
        <script>
        function allowDrop(ev)
        {
        ev.preventDefault();
        }
        
        function drag(ev)
        {
        ev.dataTransfer.setData("Text",ev.target.id);
        }
        
        function drop(ev)
        {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
        }
        $(document).ready(function(){
          $("#button").click(function(){
            $(".dragdrop-hidden").addClass("dragdrop-show");
          });
        });
        </script>