Trascinamento in HTMLAdobe AIR 1.0 e versioni successive Per trascinare i dati all'interno e all'esterno di un'applicazione basata su HTML (o all'interno e all'esterno dell'HTML visualizzato in un HTMLLoader), è possibile utilizzare eventi di trascinamento HTML. L'API di trascinamento HTML consente di trascinare verso e da elementi DOM all'interno del contenuto HTML. Nota: è possibile inoltre utilizzare le API NativeDragEvent e NativeDragManager di AIR intercettando gli eventi sull'oggetto HTMLLoader che include il contenuto HTML. Tuttavia, l'API HTML è meglio integrata con il DOM HTML e consente di controllare il comportamento predefinito.
Comportamento di trascinamento predefinitoL'ambiente HTML offre un comportamento predefinito per i movimenti di trascinamento che coinvolgono testo, immagini e URL. Con il comportamento predefinito, è possibile sempre trascinare questi tipi di dati fuori da un elemento. Tuttavia, è possibile trascinare solo testo in un elemento e solo a elementi in un'area modificabile di una pagina. Quando si trascina testo tra o all'interno di aree modificabili di una pagina, il comportamento predefinito esegue un'azione di spostamento. Quando si trascina testo in un'area modificabile da un'area non modificabile o dall'esterno dell'applicazione, il comportamento predefinito esegue un'azione di copia. È possibile sostituire il comportamento predefinito gestendo da solo eventi di trascinamento. Per annullare il comportamento predefinito, è necessario chiamare i metodi preventDefault() degli oggetti inviati per gli eventi di trascinamento. È possibile quindi inserire dati nella destinazione di rilascio e rimuovere dati dall'origine del trascinamento secondo necessità al fine di eseguire l'azione selezionata. Per impostazione predefinita, l'utente può selezionare e trascinare qualsiasi testo e trascinare immagini e collegamenti. È possibile utilizzare la proprietà WebKit CSS, -webkit-user-select per controllare come si possa selezionare qualsiasi elemento HTML. Ad esempio, se si imposta -webkit-user-select su none, il contenuto dell'elemento non è selezionabile e quindi non può essere trascinato. È possibile inoltre utilizzare la proprietà CSS, -webkit-user-drag per controllare se è possibile trascinare un elemento come intero. Tuttavia, il contenuto dell'elemento viene trattato in modo separato. L'utente potrebbe ancora trascinare una porzione selezionata del testo. Per ulteriori informazioni, consultate CSS in AIR. Eventi di trascinamento in HTMLGli eventi, inviati dall'elemento promotore da cui ha origine un trascinamento, sono:
Gli eventi inviati da una destinazione di trascinamento sono:
L'oggetto evento inviato in risposta a questi eventi è simile a un evento di mouse. È possibile utilizzare le proprietà evento del mouse come (clientX, clientY) e (screenX, screenY), per determinare la posizione del mouse. La proprietà più importante di un oggetto evento di trascinamento è dataTransfer, contenente i dati trascinati. L'oggetto dataTransfer stesso ha le seguenti proprietà e metodi:
Tipi MIME per trascinamento HTMLI tipi MIME da utilizzare con l'oggetto dataTransfer di un evento di trascinamento HTML:
È possibile utilizzare anche altre stringhe MIME, comprese le stringhe definite dall'applicazione. Tuttavia, altre applicazioni potrebbero non essere in grado di riconoscere o utilizzare i dati trasferiti. È vostra responsabilità aggiungere dati all'oggetto dataTransfer nel formato previsto. Importante: solo il codice eseguito nella sandbox dell'applicazione può accedere ai file rilasciati. Il tentativo di leggere o impostare qualsiasi proprietà di un oggetto File in una sandbox di non applicazione genera un errore di sicurezza. Per ulteriori informazioni, consultate Gestione dei rilasci di file nelle sandbox HTML di non applicazione.
Effetti di trascinamento in HTMLIl promotore del movimento di trascinamento può limitare gli effetti di trascinamento consentiti impostando la proprietà dataTransfer.effectAllowed nel gestore dell'evento dragstart. È possibile utilizzare i seguenti valori stringa:
La destinazione del movimento di trascinamento può impostare la proprietà dataTransfer.dropEffect per indicare l'azione da intraprendere se l'utente completa il rilascio. Se l'effetto di rilascio è una delle azioni consentite, il sistema visualizza il cursore appropriato per copia, spostamento o collegamento. In caso contrario, il sistema visualizza il cursore non disponibile. Se non è impostato alcun effetto di rilascio dalla destinazione, l'utente può scegliere tra le azioni consentite con i tasti modificatore. Impostate il valore dropEffect nei gestori per entrambi gli eventi dragover e dragenter: 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";
}
Nota: sebbene sia necessario impostare sempre la proprietà dropEffect nel gestore perdragenter, accertatevi che l'evento dragover successivo reimposti la proprietà al suo valore predefinito. Impostate dropEffect in risposta a entrambi gli eventi.
|
|
