Slepen en neerzetten in HTML

Adobe AIR 1.0 of hoger

Als u gegevens in en uit een HTML-toepassing wilt slepen (of in en uit de HTML die wordt weergegeven in een HTMLLoader), kunt u gebeurtenissen voor het slepen en neerzetten van HTML gebruiken. Met de API voor het slepen en neerzetten van HTML kunt u gegevens slepen naar en vanuit DOM-elementen in de HTML-inhoud.

Opmerking: U kunt ook de API's NativeDragEvent en NativeDragManager van AIR gebruiken door te luisteren naar gebeurtenissen van het HTMLLoader-object dat de HTML-inhoud bevat. De API voor HTML is echter beter geïntegreerd met het HTML DOM en geeft u meer controle over het standaardgedrag.

Standaardgedrag bij slepen en neerzetten

De HTML-omgeving biedt standaardgedrag voor bewegingen die betrekking hebben op het slepen en neerzetten van tekst, afbeeldingen en URL's. Met het standaardgedrag kunt u deze typen gegevens altijd uit een element slepen. U kunt echter alleen tekst naar een element slepen en alleen naar elementen in een bewerkbaar gebied op een pagina. Wanneer u tekst sleept tussen of in bewerkbare gebieden op een pagina, wordt de tekst standaard verplaatst. Wanneer u tekst vanuit een niet-bewerkbaar gebied of van buiten de toepassing naar een bewerkbaar gebied sleept, wordt de tekst standaard gekopieerd.

U kunt het standaardgedrag overschrijven door de gebeurtenissen voor slepen en neerzetten zelf af te handelen. Als u het standaardgedrag wilt annuleren, moet u de methode preventDefault() oproepen van de objecten die worden verzonden voor gebeurtenissen voor slepen en neerzetten. Vervolgens kunt u gegevens in het neerzetdoel invoegen en gegevens uit het sleepdoel verwijderen om de gekozen actie uit te voeren.

Standaard kan de gebruiker elke tekst selecteren en slepen, en afbeeldingen en koppelingen slepen. Met de CSS-eigenschap -webkit-user-select van de WebKit kunt u bepalen hoe elk HTML-element kan worden geselecteerd. Als u bijvoorbeeld -webkit-user-select op none instelt, kan de inhoud van het element niet worden geselecteerd en dus ook niet worden gesleept. U kunt ook de CSS-eigenschap -webkit-user-drag gebruiken om te bepalen of een element in zijn geheel kan worden gesleept. De inhoud van het element wordt echter afzonderlijk behandeld. De gebruiker kan ook een geselecteerd gedeelte van de tekst slepen. Zie CSS in AIR voor meer informatie.

Gebeurtenissen voor slepen en neerzetten in HTML

Het initiatorelement van waaruit een sleepbeweging afkomstig is, verzendt de volgende gebeurtenissen:

Gebeurtenis

Beschrijving

dragstart

Wordt verzonden wanneer de gebruiker de sleepbeweging start. De handler voor deze gebeurtenis kan indien nodig het slepen voorkomen door de methode preventDefault() van het gebeurtenisobject op te roepen. Stel de eigenschap effectAllowed in om te bepalen of de gesleepte gegevens kunnen worden gekopieerd, gekoppeld of verplaatst. Geselecteerde tekst, afbeeldingen en koppelingen worden standaard op het klembord geplaatst, maar u kunt verschillende gegevens voor de sleepbeweging instellen met de eigenschap dataTransfer van het gebeurtenisobject.

drag

Wordt continu verzonden tijdens de sleepbeweging.

dragend

Wordt verzonden wanneer de gebruiker de muisknop loslaat om de sleepbeweging te beëindigen.

Een sleepdoel verzendt de volgende gebeurtenissen:

Gebeurtenis

Beschrijving

dragover

Wordt continu verzonden zolang de sleepbeweging plaatsvindt binnen de grenzen van het element. De handler voor deze gebeurtenis moet de eigenschap dataTransfer.dropEffect instellen om aan te geven of de neergezette gegevens worden gekopieerd, verplaatst of gekoppeld wanneer de gebruiker de muisknop loslaat.

dragenter

Wordt verzonden wanneer de sleepbeweging binnen de grenzen van het element komt.

Als u eigenschappen van een dataTransfer-object wijzigt in een handler voor de dragenter-gebeurtenis, worden die wijzigingen overschreven door de volgende dragover-gebeurtenis. Er is echter een korte vertraging tussen een dragenter-gebeurtenis en de eerste dragover-gebeurtenis, waardoor de cursor kan gaan knipperen als andere eigenschappen zijn ingesteld. In veel gevallen kunt u dezelfde gebeurtenishandler gebruiken voor beide gebeurtenissen.

dragleave

Wordt verzonden wanneer de sleepbeweging buiten de grenzen van het element komt.

drop

Wordt verzonden wanneer de gebruiker de gegevens op het element neerzet. De gesleepte gegevens zijn alleen toegankelijk in de handler voor deze gebeurtenis.

Het gebeurtenisobject dat wordt verzonden als reactie op deze gebeurtenissen, is vergelijkbaar met een muisgebeurtenis. Met eigenschappen van een muisgebeurtenis, zoals ( clientX , clientY ) en ( screenX , screenY ), kunt u de positie van de muis bepalen.

De belangrijkste eigenschap van een sleepgebeurtenisobject is dataTransfer , dat de gegevens bevat die worden gesleept. Het dataTransfer -object heeft de volgende eigenschappen en methoden:

Eigenschap of methode

Beschrijving

effectAllowed

Het effect dat is toegestaan door de bron van waaruit wordt gesleept. Gewoonlijk wordt deze waarde ingesteld door de handler voor de gebeurtenis dragstart. Zie Sleepeffecten in HTML .

dropEffect

Het effect dat is gekozen door het doel of door de gebruiker. Als u dropEffect instelt in een gebeurtenishandler voor dragover of dragenter , wordt de muiscursor door AIR bijgewerkt en geeft deze het effect aan dat optreedt als de gebruiker de muis loslaat. Als de ingestelde waarde voor dropEffect niet overeenkomt met een van de toegestane effecten, is neerzetten niet toegestaan en wordt de cursor voor een niet-beschikbare actie weergegeven. Als u geen waarde voor dropEffect hebt ingesteld als reactie op de laatste dragover - of dragenter -gebeurtenis, kan de gebruiker uit de toegestane effecten kiezen met de standaard aanpassingstoetsen van het besturingssysteem.

Het uiteindelijke effect wordt gerapporteerd door de eigenschap dropEffect van het object dat wordt verzonden voor dragend . Als de gebruiker het neerzetten annuleert door de muisknop los te laten buiten een geschikt doel, wordt dropEffect ingesteld op none .

types

Een array met de MIME-tekenreeksen voor elke gegevensindeling die aanwezig is in het object dataTransfer .

getData(mimeType)

Hiermee worden de gegevens opgehaald in de indeling die is opgegeven met de parameter mimeType .

De methode getData() kan alleen worden opgeroepen als reactie op de gebeurtenis drop .

setData(mimeType)

Hiermee worden gegevens aan dataTransfer toegevoegd in de indeling die is opgegeven met de parameter mimeType. U kunt gegevens in meerdere indelingen toevoegen door setData() op te roepen voor elk MIME-type. Alle gegevens die door het standaardgedrag voor neerzetten in het object dataTransfer worden geplaatst, worden gewist.

De methode setData() kan alleen worden opgeroepen als reactie op de gebeurtenis dragstart .

clearData(mimeType)

Hiermee worden alle gegevens gewist in de indeling die is opgegeven met de parameter mimeType .

setDragImage(image, offsetX, offsetY)

Hiermee stelt u een aangepaste sleepafbeelding in. De setDragImage() -methode kan alleen worden aangeroepen als reactie op een dragstart-gebeurtenis en alleen wanneer een volledig HTML-element wordt versleept door zijn CSS-stijl -webkit-user-drag op element in te stellen. De parameter image kan een JavaScript-element of Image-object zijn.

MIME-typen voor het slepen en neerzetten van HTML

U kunt onder andere de volgende MIME-typen gebruiken met het object dataTransfer van een gebeurtenis voor het slepen en neerzetten van HTML:

Gegevensindeling

MIME-type

Tekst

"text/plain"

HTML

"text/html"

URL

"text/uri-list"

Bitmap

"image/x-vnd.adobe.air.bitmap"

Bestandenlijst

"application/x-vnd.adobe.air.file-list"

U kunt ook andere MIME-tekenreeksen gebruiken, zoals tekenreeksen die door de toepassing zijn gedefinieerd. Het is echter mogelijk dat andere toepassingen de overgedragen gegevens niet herkennen of kunnen gebruiken. Het is uw verantwoordelijkheid om gegevens aan het object dataTransfer toe te voegen in de verwachte indeling.

Belangrijk: Alleen code die in de toepassingssandbox wordt uitgevoerd, heeft toegang tot neergezette bestanden. Als een eigenschap van een File-object wordt gelezen of ingesteld in een externe sandbox, wordt een beveiligingsfout gegenereerd. Zie Bestanden neerzetten in niet-toepassingssandboxen in HMTL voor meer informatie.

Sleepeffecten in HTML

De initiator van de sleepbeweging kan de toegestane sleepeffecten beperken door de eigenschap dataTransfer.effectAllowed in te stellen in de handler voor de gebeurtenis dragstart . De volgende tekenreeken kunnen worden gebruikt:

Tekenreekswaarde

Beschrijving

"none"

Er zijn geen sleepbewerkingen toegestaan.

"copy"

De gegevens worden naar het doel gekopieerd terwijl de oorspronkelijke gegevens op hun plaats blijven staan.

"link"

De gegevens worden met het neerzetdoel gedeeld via een koppeling met de oorspronkelijke gegevens.

"move”

De gegevens worden naar het doel gekopieerd en van de oorspronkelijke locatie verwijderd.

"copyLink"

De gegevens kunnen worden gekopieerd of gekoppeld.

"copyMove"

De gegevens kunnen worden gekopieerd of verplaatst.

"linkMove"

De gegevens kunnen worden gekoppeld of verplaatst.

"all"

De gegevens kunnen worden gekopieerd, verplaatst of gekoppeld. All is het standaardeffect wanneer u het standaardgedrag uitschakelt.

Het doel van de sleepbeweging kan de eigenschap dataTransfer.dropEffect instellen om aan te geven welke actie wordt uitgevoerd als de gebruiker de gegevens heeft neergezet. Als het neerzeteffect een van de toegestane acties is, wordt de juiste cursor voor kopiëren, verplaatsen of koppelen weergegeven. Als dat niet zo is, wordt de cursor voor een niet-beschikbare actie weergegeven. Als door het doel geen neerzeteffect is ingesteld, kan de gebruiker een toegestane actie kiezen met de aanpassingstoetsen.

Stel de waarde van dropEffect in de handlers voor de gebeurtenissen dragover en dragenter in: 

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"; 
}
Opmerking: Hoewel u de eigenschap dropEffect altijd moet instellen in de handler voor dragenter , moet u niet vergeten dat de volgende dragover -gebeurtenis de standaardwaarde van de eigenschap herstelt. Stel dropEffect in als reactie op beide gebeurtenissen.