Gegevens uit een HTML-element slepen

Adobe AIR 1.0 of hoger

Bij het standaardgedrag kan de meeste inhoud van een HTML-pagina via slepen worden gekopieerd. Met de CSS-eigenschappen -webkit-user-select en -webkit-user-drag kunt u bepalen welke inhoud mag worden gesleept.

Overschrijf het standaardgedrag voor uitslepen in de handler voor de gebeurtenis dragstart . Roep de methode setData() van de eigenschap dataTransfer van het gebeurtenisobject op om uw eigen gegevens in de sleepbeweging te plaatsen.

Stel de eigenschap dataTransfer.effectAllowed van het gebeurtenisobject dat voor de gebeurtenis dragstart wordt verzonden in om aan te geven welke sleepeffecten een bronobject ondersteunt wanneer u geen gebruik maakt van het standaardgedrag. U kunt elke combinatie van effecten kiezen. Als een bronelement bijvoorbeeld de effecten kopiëren en koppelen ondersteunt, stelt u de eigenschap in op "copyLink" .

Gesleepte gegevens instellen

Voeg de gegevens voor de sleepbeweging met de eigenschap dataTransfer toe in de handler voor de gebeurtenis dragstart . Gebruik de methode dataTransfer.setData() om gegevens op het klembord te plaatsen en geef daarbij het MIME-type en de gegevens die u wilt overdragen door.

Als uw toepassing bijvoorbeeld een afbeeldingselement met de id imageOfGeorge bevat, kunt u de volgende gebeurtenishandler voor dragstart gebruiken. In dit voorbeeld ziet u hoe weergaven van een afbeelding van George in verschillende gegevensindelingen worden toegevoegd, waardoor de kans groter wordt dat andere toepassingen de gesleepte gegevens kunnen gebruiken. 

function dragStartHandler(event){         
    event.dataTransfer.effectAllowed = "copy"; 
     
    var dragImage = document.getElementById("imageOfGeorge"); 
    var dragFile = new air.File(dragImage.src); 
    event.dataTransfer.setData("text/plain","A picture of George"); 
    event.dataTransfer.setData("image/x-vnd.adobe.air.bitmap", dragImage); 
    event.dataTransfer.setData("application/x-vnd.adobe.air.file-list", 
                                new Array(dragFile)); 
}
Opmerking: Wanneer u de methode setData() van het object dataTransfer oproept, worden geen gegevens toegevoegd als het standaardgedrag voor slepen en neerzetten wordt gebruikt.