!

Dette materialet blir ikke lenger vedlikeholdt. Du vil finne oppdatert materiale på siden: http://borres.hiof.no/wep/

HTML5
dragging
Børre Stenseth
HTML >Drag

Drag and drop

Hva
Flytte (drag and drop)

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.

_self

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.

WHO
self

HTML-sekvensen er slik:

<table>
<tr>
<td class="box" id="box1">
    <figure draggable="true" id="theImage">
    <img src="http://www.it.hiof.no/~borres/allround/selfimages/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:

_eventhandlere

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.

Et litt mer omfattende eksempel som gir tilbakemelding på hvilket element som dragges finner du her:

Sorter byer http://www.it.hiof.no/~borres/dw/ht5/dragdrop/ddcities.html

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:

_eventhandlere

Hva kan vi gjøre med disse filene ? Mozilla [4] har noen forslag, og du finner demoer på HTML5 Rocks Tutorieals [5] .

Referanser
  1. jQuery Javascript bibliotek jquery jquery.com/ 04-07-2010
  1. Quirksmode Peter-Paul Koch Quirksmode.org www.quirksmode.org/ 14-03-2010
  1. HTML5 Tutorial Tutorials Point www.tutorialspoint.com/html5/index.htm 14-09-2010
  1. Mozilla Developer Network MDN https://developer.mozilla.org/en/Using_files_from_web_applications 02-04-2011
  1. HTML5 Rocks 2010 Eric Bidelman www.html5rocks.com/en/tutorials/file/dndfiles/ 01-08-2012
Vedlikehold
B Stenseth, april 2011
( Velkommen ) HTML >Drag ( Forms )