Dra och släpp i HTML

Adobe AIR 1.0 och senare

Standardbeteende för dra och släpp
Dra och släpp-händelser i HTML
MIME-typer för dra och släpp i HTML
Dragningseffekter i HTML.

Om du vill dra data till och ut från ett HTML-baserat program (eller till och ut från den HTML som visas i HTMLLoader), kan du använda dra och släpp-händelserna för HTML. Med API:et för dra och släppa i HTML kan du dra till och från DOM-element i HTML-innehållet.

Obs! Du kan också använda AIR-API:erna NativeDragEvent och NativeDragManager genom att avlyssna händelser för HTMLLoader-objektet som rymmer HTML-innehållet. HTML-API:t är emellertid bättre integrerat med HTML DOM och ger dig kontroll över standardbeteendet.

Standardbeteende för dra och släpp

HTML-miljön innehåller standardbeteenden för dra och släpp-gester som omfattar text, bilder och URL:er. Med hjälp av standardbeteendet kan du alltid dra dessa typer av data ut från ett element. Du kan emellertid bara dra text till ett element och bara till element i ett redigerbart område på en sida. När du drar text mellan eller inom redigerbara områden på en sida utför standardbeteendet en flyttåtgärd. När du drar texten till ett redigerbart område från ett icke redigerbart område eller från utsidan av ett program, utför standardbeteendet en kopieringsåtgärd.

Du kan åsidosätta standardbeteendet genom att hantera dra och släpp-händelserna själv. Om du vill avbryta standardbeteendet måste du anropa preventDefault()-metoderna för objekten som skickas för dra och släpp-händelserna. Du kan sedan infoga data i släppmålet och ta bort data från dragningskällan om det behövs för att utföra den valda åtgärden.

Användaren kan som standard dra och släppa all text samt dra bilder och länka. Med WebKit CSS-egenskapen, -webkit-user-select, kan du kontrollera hur HTML-element markeras. Om du till exempel ställer in -webkit-user-select på none kan elementinnehållet inte markeras och därför inte dras. Du kan också använda CSS-egenskapen -webkit-user-drag för att kontrollera om ett element som helhet kan dras. Innehållet i elementet behandlas emellertid separat. Användaren kan fortfarande dra en markerad del av texten. Mer information finns i CSS i AIR.

Dra och släpp-händelser i HTML

Händelserna som skickas av initierarelement som dragningen startar från är följande:

Händelse	Beskrivning
dragstart	Skickas när användaren inleder dragningsgesten. Hanteraren för den här händelsen kan förhindra dragningen om det behövs, genom att anropa metoden preventDefault() för händelseobjektet. Om du vill styra hur den dragna informationen kan kopieras, länkas eller flyttas ställer du in egenskapen effectAllowed. Markerad text, bilder och länkar placeras i Urklipp av standardbeteendet, men du kan ställa in andra data för dragningsgesten via egenskapen dataTransfer för händelseobjektet.
drag	Skickas fortlöpande under dragningsgesten.
dragend	Skickas när användaren släpper upp musknappen för att avsluta dragningsgesten.

Följande händelser skickas av ett dragningsmål:

Händelse	Beskrivning
dragover	Skickas fortlöpande medan dragningsgesten finns kvar inom elementets gränser. Hanteraren för den här händelsen bör ställa in egenskapen dataTransfer.dropEffect till att ange om släppningen leder till en kopierings-, flytt- eller länkningsåtgärd om användaren släpper musknappen.
dragenter	Skickas när någon drar innanför gränsen till ett element. Om du ändrar några egenskaper för ett dataTransfer-objekt i en hanterare för händelsen dragenter, åsidosätts dessa ändringar snabbt av nästa dragover-händelse. Å andra sidan sker det en kort fördröjning mellan en dragenter-händelse och den första dragover-händelsen som kan göra så att markören blinkar om olika egenskaper har ställts in. I många fall kan du använda samma händelsehanterare för båda händelserna.
dragleave	Skickas när dragningsgesten lämnar elementets gränser.
drop	Skickas när användaren släpper data i elementet. Data som dras kan bara nås inom hanteraren för den här händelsen.

Händelseobjektet som skickas som svar på dessa händelser påminner om en mushändelse. Du kan använda mushändelseegenskaperna, till exempel (clientX, clientY) och (screenX, screenY), för att ta reda på musens placering.

Den viktigaste händelsen för ett dragningshändelseobjekt är dataTransfer, som innehåller de data som dras. Objektet dataTransfer har följande egenskaper och metoder:

Egenskap eller metod	Beskrivning
effectAllowed	Effekten som tillåts av källan till dragningen. Hanteraren för händelsen dragstart ställer vanligtvis in detta värde. Se Dragningseffekter i HTML..
dropEffect	Effekten som väljs av målet eller användaren. Om du ställer in `dropEffect` i en `dragover`- eller `dragenter`-händelsehanterare uppdaterar AIR musmarkören till att ange vilken effekt som sker om användaren släpper upp musknappen. Om `dropEffect`-inställningen inte motsvarar någon av de tillåtna effekterna, går det inte att släppa och markören otillgänglig visas. Om du inte har ställt in en `dropEffect` som svar på den senaste `dragover`- eller `dragenter`-händelsen kan användaren välja från de tillåtna effekterna med operativsystemets vanliga modifieringstangenter. Den slutliga effekten rapporteras av egenskapen `dropEffect` för objektet som skickas för `dragend`. Om användaren avbryter släppningen genom att släppa upp musknappen utanför ett möjligt mål, ställs `dropEffect` in på `none`.
types	En array som innehåller MIME-typsträngar för varje dataformat som anges i objektet `dataTransfer`.
getData(mimeType)	Hämtar data i det format som anges i parametern `mimeType`. Metoden `getData()` kan bara anropas som svar på händelsen `drop`.
setData(mimeType)	Lägger till data i `dataTransfer` i det format som anges med parametern mimeType. Du kan lägga till data i flera format genom att anropa `setData()` för varje MIME-typ. Alla data som placeras i objektet `dataTransfer` med standarddragningsbeteendet rensas. Metoden `setData()` kan bara anropas som svar på händelsen `dragstart`.
clearData(mimeType)	Raderar alla data i det format som anges i parametern `mimeType`.
setDragImage(image, offsetX, offsetY)	Ställer in en anpassad dragningsbild. Metoden `setDragImage()` kan bara anropas som svar på händelsen dragstart och bara när ett helt HTML-element dras genom att dess CSS-format `-webkit-user-drag` anges som `element`. Parametern `image` kan vara ett JavaScript Element- eller Image-objekt.

MIME-typer för dra och släpp i HTML

MIME-typerna som används med dataTransfer-objektet för en dra och släpp-händelse i HTML omfattar:

Dataformat	MIME-typ
Text	”text/plain”
HTML	”text/html”
URL:en	”text/uri-list”
Bitmapp	”image/x-vnd.adobe.air.bitmap”
Fillista	”application/x-vnd.adobe.air.file-list”

Du kan använda andra MIME-strängar, bland annat programdefinierade strängar. Emellertid kanske andra program inte känner igen eller kan använda den överförda informationen. Det är ditt ansvar att lägga till data i objektet dataTransfer i det förväntade formatet.

Viktigt! Det är bara kod som körs i sandlådan application som har åtkomst till släppta filer. Ett försök att läsa eller ställa in egenskaper för ett File-objekt i en annan sandlåda än application returnerar ett säkerhetsfel. Mer information finns i Hantera filsläppningar i HTML-sandlådor av annan typ än application.

Dragningseffekter i HTML.

Initieraren till dragningsgesten kan begränsa vilka dragningseffekter som tillåts genom att ställa in egenskapen dataTransfer.effectAllowed i hanteraren för händelsen dragstart. Följande strängvärden kan användas:

Strängvärde	Beskrivning
”ingen”	Inga dragningsåtgärder tillåts.
”copy”	Data kopieras till målet, medan originalet finns kvar.
”link”	Data delas med släppmålet med hjälp av en länk tillbaka till originalet.
”move”	Data kopieras till målet och tas bort från den ursprungliga platsen.
”copyLink”	Data kan kopieras eller länkas.
”copyMove”	Data kan kopieras eller flyttas.
”linkMove”	Data kan länkas eller flyttas.
”all”	Data kan kopieras, flyttas eller länkas. All är standardeffekten när du förhindrar standardbeteendet.

Målet för dragningsgesten kan ställa in egenskapen dataTransfer.dropEffect till att ange vilken åtgärd som ska vidtas om användaren slutför släppningen. Om släppeffekten är en av de tillåtna åtgärderna, visas lämplig kopierings-, flyttnings- eller länkningsmarkör. Om inte, visas markören otillgänglig. Om ingen släppningseffekt ställs in av målet, kan användaren välja mellan de tillåtna åtgärderna med hjälp av modifieringstangenterna.

Ställ in värdet dropEffect i hanterarna för både dragover- och dragenter-händelserna:

function doDragStart(event) { 
    event.dataTransfer.setData("text/plain","Text to drag"); 
    event.dataTransfer.effectAllowed = "copyMove"; 
} 
 
function doDragOver(event) { 
    event.dataTransfer.dropEffect = "copy"; 
} 
 
function doDragEnter(event) { 
    event.dataTransfer.dropEffect = "copy"; 
}

Obs! Även om du alltid bör ställa in egenskapen dropEffect i hanteraren för dragenter, ska du vara medveten om att nästa dragover-händelser återställer egenskapen till standardvärdet. Ställ in dropEffect som svar på båda händelserna.