Arrastar e soltar são um recurso comum, ou seja, arraste para outra posição após o objeto de captura. No HTML5, os usuários podem usar um mouse para selecionar um elemento de arrastar, arrastar o elemento para um elemento colocável e colocar o botão do mouse nesses elementos. Durante a operação de arrasto, o semi -transparente indicando que o ponteiro do mouse pode ser arrastado.
Se esperamos que o elemento possa ser arrastado, precisamos definir sua propriedade Draggable como true (um padrão de tag draggable é verdadeiro))
Evento de arrastar e soltarVários eventos serão acionados em diferentes estágios da operação de arrastar e soltar, e o atributo datatransfer do incidente de arrasto e arrasto deve armazenar os dados relevantes na operação de arrastar e soltar.
| Arraste | Ativo para [elemento de origem], quando um elemento começa a ser arrastado, o elemento arrastado pelo usuário requer um evento dragstart adicional. Neste incidente, o ouvinte configurará informações relacionadas a esse arrasto, como arrastar dados e imagens. |
| Dragenter | Ativo para [elemento de origem], gabia quando o mouse no arrastar para um elemento. O ouvinte deste incidente precisa indicar se o mouse pode ser lançado nesta área. Se o ouvinte não estiver definido ou o ouvinte não for operado, ele não poderá ser lançado por padrão. |
| dragover | Ativo no [elemento de destino], gatilhos quando o mouse se moveu por um arrasto. |
| arrastar | Ativo no [elemento de destino], gabia quando o mouse deixa o elemento de arrasto. Ele pode ser usado como uma marca de destaque ou inserção que pode ser lançada. |
| Arrastar | Ativo para [elemento de origem], o evento é acionado quando o elemento é arrastado. |
| derrubar | Ativa para o [elemento de destino], aciona o elemento de liberação quando a liberação da liberação da operação de arrasto. |
| arraste | Ativo para [elemento de origem], a fonte de arrasto é acionada no final da operação de arrasto, independentemente de a operação ser bem -sucedida. |
(Ao arrastar, ele aciona apenas os eventos relacionados ao arrasto, eventos de mouse, como mousemove, que não serão acionados)
Objeto DatatransferAo processar a operação de arrastar e soltar, precisamos usar o objeto DataTransfer para salvar os dados arrastados. Datatransfer pode salvar um ou mais dados, um ou mais tipos de dados.
propriedade
| Dropeffect | Dropeffect [String] Especifique o efeito de colocação real, possível valor: Cópia: cópia para uma nova posição Mover: Mova para uma nova posição Link: Crie um link de uma fonte para uma nova posição Nenhum: proibido de colocar (sem operação) |
| efetivado | [String] Especifique o efeito permitido ao arrastar, possíveis valores: Cópia: cópia para uma nova posição. Mova: mova para uma nova posição. Link: Crie um link de uma fonte para um novo local. Copylink: permita cópia ou link. CopyMove: permita copiar ou mover. LinkMove: permita links ou mova. Todos: permita todas as operações. Nenhum: proibido todas as operações. Não iniciado: o valor padrão (valor padrão) é equivalente a todos. |
| Arquivos | Contém uma lista de arquivos locais disponíveis na transmissão de dados. Se a operação de arrasto não envolver o arquivo de arrasto, esse atributo será uma lista vazia. |
| tipos | Salve uma lista de tipos de dados de armazenamento como o primeiro item, o pedido é consistente com a ordem de adição de dados. Se nenhum dados for adicionado, uma lista vazia será retornada. |
método
| AddElement de vazio (elemento elemento) | Defina a fonte de arrasto. Geralmente, não há necessidade de alterar isso. O objetivo padrão é ser arrastado nós |
| Void cleardata (tipo de string) | Excluir dados associados a um determinado tipo. Os parâmetros de tipo são opcionais. Se o tipo estiver vazio ou não especificado, exclua todos os tipos de dados associados. Se não houver tipo especificado de dados ou transmissão de dados não contiver dados, esse método não terá efeito. |
| String getData (tipo de string) | Obtendo um determinado tipo de dados, se os dados do tipo fornecido não existirem ou os dados forem armazenados sem conter dados, o método retornará uma string vazia. |
| void setData (tipo de sequência, dados da string) | Defina dados para um determinado tipo. Se o tipo de dados não existir, ele será adicionado ao final e o último projeto nesta lista de tipos será um novo formato. Se você já existe, substitua os dados existentes na mesma posição. Ou seja, quando o mesmo tipo de dados é substituído, a ordem da lista de tipos não será alterada. |
| Void SetDragimage (imagem de domelement, longa x, longa y) | Personalize uma imagem de um arrasto esperado. Na maioria dos casos, este item não precisa ser definido, porque o nó arrastado é criado como a imagem padrão. A imagem deve ser usada como um elemento de imagem de feedback de arrasto O deslocamento horizontal na imagem X. O deslocamento vertical na estátua Y. |
Suporte do navegador
Internet Explorer 9+, Firefox, Opera 12, Chrome e Safari 5+
Código de demonstração
<! Altura: 100px; #ccccff sólido; > </div> <div class = bin> & nbsp; 'Caixa. e.datransfer true; O elemento de arrasto insere o elemento de destino bin.ondragover = function (e) {E.PreentDefault (); 'Retorno; function (e) {if (drag) {drag.parentnode.removechild (drag); Função (e) {E.PrentDefault ();O acima é a introdução das informações relacionadas a arrastar e soltar no HTML5.