Slepen en neerzetten in HTMLAdobe 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 neerzettenDe 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 HTMLHet initiatorelement van waaruit een sleepbeweging afkomstig is, verzendt de volgende gebeurtenissen:
Een sleepdoel verzendt de volgende gebeurtenissen:
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:
MIME-typen voor het slepen en neerzetten van HTMLU kunt onder andere de volgende MIME-typen gebruiken met het object dataTransfer van een gebeurtenis voor het slepen en neerzetten van HTML:
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 HTMLDe 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:
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.
|
|
