Arrastar e soltar em HTMLAdobe AIR 1.0 e posterior Para arrastar dados para dentro e fora de um aplicativo baseado em HTML (ou para dentro e fora do HTML exibido em um HTMLLoader), você pode usar eventos de arrastar e soltar HTML. A API de arrastar e soltar HTML permite que você arraste para e de elementos DOM no conteúdo HTML. Nota: Você também pode usar as APIs NativeDragEvent e NativeDragManager do AIR ouvindo eventos no objeto HTMLLoader contendo o conteúdo HTML. No entanto, a API HTML é melhor integrada com o DOM HTML e oferece a você controle do comportamento padrão.
Comportamento padrão de arrastar e soltarO ambiente HTML fornece o comportamento padrão para gestos de arrastar e soltar envolvendo texto, imagens e URLs. Usando o comportamento padrão, você sempre pode arrastar esses tipos de dados para fora de um elemento. No entanto, você pode apenas arrastar texto em um elemento e apenas a elementos em uma região editável de uma página. Quando você arrasta texto entre ou dentro de regiões editáveis de uma página, o comportamento padrão executa uma ação de mover. Quando você arrasta texto para uma região editável de uma região não-editável ou de fora do aplicativo, o comportamento padrão executa uma ação de copiar. Você pode substituir o comportamento padrão manipulando os eventos de arrastar e soltar sozinho. Para cancelar o comportamento padrão, você deve chamar os métodos preventDefault() dos objetos despachados para os eventos de arrastar e soltar. Você pode então inserir dados no destino de soltar e remover dados da origem de arrastar conforme necessário para executar a ação escolhida. Por padrão, o usuário pode selecionar e arrastar qualquer texto e arrastar imagens e links. Você pode usar a propriedade WebKit CSS, -webkit-user-select, para controlar como qualquer elemento HTML pode ser selecionado. Por exemplo, se você definir -webkit-user-select como none, o conteúdo do elemento não podem ser selecionados e, portanto, não podem ser arrastados. Você também pode usar a propriedade CSS -webkit-user-drag para controlar se um elemento como um todo pode ser arrastado. No entanto, o conteúdo do elemento é tratado separadamente. O usuário poderia ainda arrastar uma parte selecionada do texto. Para obter mais informações, consulte CSS no AIR. Eventos de arrastar e soltar em HTMLOs eventos despachados pelo elemento iniciador do qual uma ação de arrastar se origina são:
Os eventos despachados por um destino de arrastar são:
O objeto de evento despachado em resposta a esses eventos é similar a um evento do mouse. Você pode usar propriedades de evento de mouse como (clientX, clientY) e (screenX, screenY), para determinar a posição do mouse. A propriedade mais importante de um objeto de evento arrastar é dataTransfer, que contém os dados que estão sendo arrastados. O objeto dataTransfer em si possui as seguintes propriedades e métodos:
Tipos MIME para arrastar e soltar HTMLOs tipos MIME a usar com o objeto dataTransfer de um evento arrastar e soltar HTML incluem:
Você também pode usar outras seqüências de caracteres MIME, incluindo as definidas por aplicativo. No entanto, outros aplicativos não podem reconhecer ou usar os dados transferidos. É sua responsabilidade adicionar dados ao objeto dataTransfer no formato esperado. Importante: Apenas código em execução na caixa de proteção do aplicativo pode acessar arquivos soltos. Tentar ler ou definir qualquer propriedade de um objeto File em uma caixa de proteção de não-aplicativo gera um erro de segurança. Consulte Tratamento de arquivos soltos em caixas de proteção HTML de não-aplicativo para obter mais informações.
Efeitos de arrastar em HTMLO iniciador do gesto de arrastar pode limitar os efeitos de arrastar permitido definindo a propriedade dataTransfer.effectAllowed no manipulador para o evento dragstart. Os seguintes valores de seqüências de caracteres podem ser usados:
O destino do gesto de arrastar pode definir a propriedade dataTransfer.dropEffect para indicar a ação tomada se o usuário concluir a ação de soltar. Se o efeito de soltar for uma das ações permitidas, o sistema exibe o cursor apropriado de copiar, mover ou vincular. Caso contrário, o sistema exibe o cursor unavailable. Se nenhum efeito de soltar for definido pelo destino, o usuário poderá escolher dentre as ações permitidas com as teclas do modificador. Defina o valor dropEffect nos manipuladores para os eventos 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: Embora você deva sempre definir a propriedade dropEffect no manipulador para dragenter, esteja ciente que o próximo evento dragover redefine a propriedade para seu valor padrão. Defina dropEffect em resposta aos dois eventos.
|
|
