Drag - drop

Hva

Det er mange måter vi kan "dragge" elementer på en vevside på. Vi har plugins til jQuery [1] som gjør jobben og Peter-Paul Kochs utmerkede Quirksmodeside [2] inneholder en robust klasse for å flytte elementer rundt på en side. Det er en modifisert variant av sistnevnte som gjør at du kan dra med deg (og åpne og lukke) dette bilde rundt omkring.

HTML5 inroduserer to attributter, draggable og dropzone, og en rekke nye begivenheter, drag,dragend,dragenter,dragleave,dragover,dragstart,drop.

Det finnes en rekke mer eller mindre robuste eksempler på "drag and drop" med HTML5 på nettet. Tutorials Point [3] har en grei beskrivelse av begivenheter og flyttbare dataformater, dataTransfer egenskapen til et begivenhet.

draggable

Hensikten med drag og drop er vel oftere at vi ønsker å plassere elementer inne i andre elementer, snarere enn at vi drar rundt på et element med absolutt posisjon, som i eksempelet ovenfor.

Du kan flytte bildet nedenfor mellom boksene.

HTML-sekvensen er slik:

<table>
<tr>
<td class="box" id="box1">
    <figure draggable="true" id="theImage">
    <img src="bs1.png" alt="WHO"/>
    <figcaption style="text-align:center">
     self
    </figcaption>
    </figure>
</td>
<td class="box" id="box2">
</td>
</tr>
</table>
<script>initDrag();</script>

og det involverte javaskriptet er slik:

var draggedElt=null;
function handleDragStart(e) {
    draggedElt = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text', 'theImage');
}
function handleDragOver(e) {
     // Allow drop.
     if (e.preventDefault) e.preventDefault();
    return false;
}
function handleDrop(e) {
    // Stops some browsers(FF+ ?) from redirecting.
    if (e.preventDefault) e.preventDefault();
    if (e.stopPropagation) e.stopPropagation();
    if (draggedElt != this) {
        this.appendChild(draggedElt);
        draggedElt=null;
    }
    return false;
}
function initDrag(){
document.getElementById('theImage')
    .addEventListener('dragstart', handleDragStart, false);
    var boxes=document.querySelectorAll('.box');
    [].forEach.call(boxes, function(box) {
    box.addEventListener('drop', handleDrop, false);
    box.addEventListener('dragover', handleDragOver, false);
    box.addEventListener('drop', handleDrop, false);
    });
}

Et problem som det er verdt å merke seg er at noen nettlesere har en tendens til å bruke det flyttede element som kilde for redirigering (??). Se kommentar i koden over.

Desktop

Vi kan også dra filer fra desktop inn i browservinduet

Forsøk å trekke noen filer fra desktoppen, eller en katalog inn i denne boksen:

HTML-sekvensen er slik:

<div id="receiver"  class="receiverbox">
</div>
<script>initFileDrag();</script>

og det involverte javaskriptet er slik:

var receiver=null;
function handleFileDragOver(e) {
     // Allow drop.
     if (e.stopPropagation) e.stopPropagation();
     if (e.preventDefault) e.preventDefault();
}
function handleFileDrop(e) {
    // Stops some browsers(FF+ ?) from redirecting.
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    receiver.innerHTML='';
    
    var files = e.dataTransfer.files;
    var T='<ul>';
    for (var ix = 0, f; f = files[ix]; ix++) 
        T+='<li>'+f.name+'</li>';
    receiver.innerHTML=T+'</ul>';
}
function initFileDrag()
{
    receiver=document.getElementById('receiver');
    receiver.addEventListener('dragover', handleFileDragOver, false);
    receiver.addEventListener('drop', handleFileDrop, false);
}

litt mer om hva vi kan gjøre med disse filene i modulen: FileReader .

Referanser

jQuery Javascript bibliotek jquery jquery.com/ 04-02-2014

Quirksmode Peter-Paul Koch Quirksmode.org www.quirksmode.org/ 14-03-2010

HTML5 Tutorial Tutorials Point www.tutorialspoint.com/html5/index.htm 14-03-2014

Mozilla Developer Network MDN developer.mozilla.org/en/Using_files_from_web_applications 02-04-2014