Przeciąganie i upuszczanie w HTMLAdobe AIR 1.0 i wersje późniejsze Aby przeciągnąć dane do i z aplikacji opartej na HTML (lub do i z treści HTML wyświetlanej w obiekcie HTMLLoader), można użyć zdarzeń przeciągania i upuszczania w treści HTML. Interfejs API przeciągania i upuszczania HTML umożliwia przeciąganie do i z elementów DOM w treści HTML. Uwaga: Można użyć także interfejsów API NativeDragEvent i NativeDragManager środowiska AIR, wykrywając zdarzenia obiektu HTMLLoader zawierającego treść HTML. Jednak interfejs API HTML jest bardziej zintegrowany z modelem DOM HTML i umożliwia sterowanie domyślnym zachowaniem.
Domyślne zachowanie przeciągania i upuszczaniaŚrodowisko HTML zapewnia domyślne zachowanie dla gestów przeciągania i upuszczania dotyczących tekstu, obrazów i adresów URL. Za pomocą domyślnego zachowania te typy danych można zawsze przeciągnąć poza element. Jednak do elementu można przeciągnąć tylko tekst i tylko do elementów edytowalnego obszaru strony. Przeciągając tekst między lub wewnątrz edytowalnych obszarów strony, zachowanie domyślne wykonuje operację przenoszenia. Jeśli tekst jest przeciągany do obszaru edytowalnego z obszaru nieedytowalnego lub spoza aplikacji, wówczas zachowanie domyślne wykonuje operację kopiowania. Zachowanie domyślne można przesłonić, samodzielnie obsługując zdarzenia przeciągania i upuszczania. Aby anulować zachowanie domyślne, należy wywołać metody preventDefault() obiektów wywołanych dla zdarzeń przeciągania i upuszczania. Można wówczas wstawić dane do celu upuszczania i usunąć dane ze źródła przeciągania, jeśli jest to konieczne do wykonania wybranej operacji. Domyślnie użytkownik może wybrać i przeciągnąć dowolny tekst oraz przeciągnąć obrazy i łącza. Właściwości CSS WebKit (-webkit-user-select) można używać do sterowania sposobem zaznaczania dowolnego elementu HTML. Na przykład, jeśli właściwość -webkit-user-select ustawiona zostanie na wartość none, wówczas treści elementu nie można zaznaczyć, dlatego też nie można jej przeciągnąć. Można użyć także właściwości CSS -webkit-user-drag, aby decydować, czy element można przeciągnąć jako całość. Jednak treść elementu jest traktowana oddzielnie. Użytkownik może nadal przeciągać wybrany fragment tekstu. Więcej informacji zawiera sekcja Dokument CSS w środowisku AIR. Zdarzenia przeciągania i upuszczania w HTMLZdarzenia wywoływane przez element inicjatora, z którego rozpoczynane jest przeciąganie:
Zdarzenia wywoływane przez cel przeciągania:
Obiekt zdarzenia wywoływany w odpowiedzi na te zdarzenia podobny jest do zdarzenia myszy. Właściwości zdarzenia myszy np. clientX, clientY i screenX, screenY można używać do określania położenia myszy. Najważniejszą właściwością obiektu zdarzenia drag jest dataTransfer, która zawiera przeciągane dane. Sam obiekt dataTransfer zawiera następujące właściwości i metody:
Typy MIME dla przeciągania i upuszczania HTMLTypy MIME do użytku w obiekcie dataTransfer zdarzenia przeciągania i upuszczania HTML:
Można również użyć innych ciągów znaków MIME, łącznie z ciągami znaków zdefiniowanymi przez aplikację. Jednak inne aplikacje mogą nie być w stanie rozpoznać lub użyć przesyłanych danych. Obowiązkiem programisty jest dodawanie danych do obiektu dataTransfer w oczekiwanym formacie. Ważne: Tylko kod działający w obszarze izolowanym aplikacji może uzyskać dostęp do upuszczanych plików. Próba odczytu lub ustawienia dowolnej właściwości obiektu File w nieaplikacyjnym obszarze izolowanym powoduje wygenerowanie błędu zabezpieczeń. Więcej informacji zawiera sekcja Obsługa upuszczania plików w nieaplikacyjnym obszarze izolowanym HTML.
Efekty przeciągania w HTMLInicjator gestu przeciągania może ograniczyć dozwolone efekty przeciągania, ustawiając właściwość dataTransfer.effectAllowed w module obsługi dla zdarzenia dragstart. Można użyć następujących ciągów znaków:
Cel gestu przeciągania może ustawić właściwość dataTransfer.dropEffect, aby wskazywana była operacja podejmowana w momencie zakończenia upuszczania. Jeśli efektem upuszczania jest jedna z dozwolonych operacji, wówczas system wyświetla odpowiedni kursor kopiowania, przesuwania lub łączenia. W przeciwnym razie system wyświetla niedostępny kursor. Jeśli żaden efekt upuszczania nie został ustawiony przez cel, użytkownik może wybierać z dozwolonych efektów za pomocą klawiszy modyfikatorów. Wartość właściwości dropEffect należy ustawić w modułach obsługi dla obu zdarzeń dragover i 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";
}
Uwaga: Mimo że zawsze należy ustawić właściwość dropEffect w module obsługi zdarzenia dragenter, programista powinien być świadomy tego, że kolejne zdarzenie dragover ponownie ustawia właściwość na jej wartość domyślną. Właściwość dropEffect należy ustawić w odpowiedzi na oba zdarzenia.
|
|
