Arrastar e soltar fazem parte do padrão HTML5.
Suporte do navegador
Internet Explorer 9, Firefox, Opera 12, Chrome e Safari 5 Suportam arrastar e soltar.
Elemento de arrasto, DragElement:
1. Adicionar evento: ONDRAGSTART 2. Adicione atributos: arrasávelColoque elemento, gota de elemento:
1. Adicione eventos: Onargenter, OnDragover, OnDragleave, ONDRAGEND, ONDROP
É semelhante aos incidentes de Mouser na classificação e é bem compreendido.
1. Arraste e solte entre os elementos na página
Vamos usar um pequeno exemplo abaixo, o arrasto e a queda entre a div é exibida, como cada evento é acionado:
<! src = ../../jQuery-1.8.3.js type = text/javascript charset = utf-8> </script> <script type = text/javascript>/*** arrastar (arrastar e soltar) é. Componente padrão HTML5. * O navegador suporta* Internet Explorer 9, Firefox, Opera 12, Chrome e Safari 5 Suportam arrastar e soltar. * / $ (fuins () {$ (#dragele) [0] .ondragstart = function (event) {console.log (drawStart); event.datatransfer.setData (text, event.target.id);}; /* * * Quando os dados de arrastar são colocados, o evento de queda ocorre. p] + @@);} * / console.log (ONDROP); ) .d (div) .Length)); ;} $ (#Dropele) [0] .ondragleave = function (event) {console.log (ONDROP LEITE); Cabeça> <Body> <Div Style = Border: 1px Solid Red; : 330px;Você precisa prestar atenção em:
A. Ontragover deve organizar o comportamento padrão do evento.
B. O comportamento padrão do evento Drop é aberto em um link, por isso também precisa impedir seu comportamento padrão.
Também é possível observar que, ao arrastar e soltar, o evento contém um evento. e copie -o.
Aqui estão outros métodos do objeto:
Event.datatransfer:
itens = [Objeto DatatransferntemList] @@ drag_drop.html: 44
Arquivos = [objeto FileList] @@ drag_drop.html: 44
TIPOS = TEXT/PLAIN @@ Drag_drop.html: 44
efetalowed = all @@ drag_drop.html: 44
Dropeffet = nenhum @@ drag_drop.html: 44
cleartata = função limpeata () {[código nativo]} @@ drag_drop.html: 44
getData = Fuory getData () {[Código nativo]} @@ drag_drop.html: 44
setData = função setData () {[código nativo]} @@ drag_drop.html: 44
setDragImage = function setDragImage () {[Código nativo]} @@
Eu usei o JS para imprimir todos os seus atributos:
1. GetData, os exemplos do SetData foram usados no exemplo acima, o ClearData é limpar os dados das configurações.
2. Vale a pena observar que os arquivos.
3. SetDragimage (imagem, x, y) é usado para definir as renderizações de mover com o mouse durante o movimento do mouse. Deve ser definido no dragstart.
4.
O acima é todo o conteúdo deste artigo.