HTML5 arrastar e soltar API para implementar o código de exemplo para classificar e soltar classificação

O HTML5 fornece uma API de arrasto direto e -DROP, que é muito conveniente para alcançarmos o efeito de arrastar e soltar. Para alcançar várias funções de arrasto e soltar.

Se você deseja arrastar e soltar um determinado elemento, deve definir a propriedade Draggable do elemento como TRUE. Os elementos IMG e os elementos são definidos com atributos Draggable para true, que podem ser arrastados diretamente e queixados.

Os incidentes de arrastar e soltar são gerados por diferentes elementos. Um elemento é arrastado e caído, e ele pode acabar atingindo o elemento que deseja colocar em muitos elementos. Aqui, refiro temporariamente o elemento do arrasto e soltar e o elemento do processo, e o elemento que eu alcancei é chamado de objeto de destino. Objetos diferentes têm diferentes eventos de arrasto e soltar.

Objeto de origem:

1. Dragstart: O objeto de origem começa a arrastar e soltar.
2. Arraste: durante o arrasto e a queda do objeto de origem.
3. Drage: o objeto de origem arrasta e cai.

Objeto de processo:

1. Dragenter: os objetos de origem começam a entrar no intervalo do processo.
2. Dragover: o objeto de origem se move dentro do intervalo do processo.
3. Dragleave: o escopo do objeto da fonte deixando o processo.

Objeto de destino:

1. Drop: o objeto de origem é arrastado e solto para o objeto de destino.

 <div id = fonte draggable = true> um elemento </div> <div id = process> b elemento </div> <div id = alvo> c elemento </div> <cript> var fonte = document.getElementById '( 'Fonte'), // um elemento proces = document.getElementById ('Process'), // B Target = Document.GeLementById ('Target'); Os eventos dragstart são gerados pelo elemento a para gerar console.log ('um elemento começa a ser arrastado');}, false) proces.addeventristerner ('dragner', function (ev) {// Evento Dragenter é gerado pelo b elemento. , False) Target.AddeventListener ('Drop', Function (Ev) {// Evento Drop é gerado pelo console.log ('a a a um elemento para C elemento');) document.ondragover = function (e) {e.preventdefault ( );} </script>

Um objeto de transmissão de dados datatransfer é fornecido em todos os eventos de arrasto e drrop para passar dados entre objetos de origem e objetos de destino. Em seguida, conheça os métodos e atributos desse objeto para entender como ele transmite dados.

Este método é armazenado no objeto Datatransfer. Receba dois parâmetros, o primeiro indica uma string para armazenar o tipo de dados e agora suporta o seguinte:

1. Texto/simples: texto de texto.
2. texto/html: texto html.
3. texto/xml: texto xml.
4. Lista de texto/URI: URL Lista, cada URL é uma linha.

O segundo parâmetro são os dados a serem armazenados. Por exemplo:

 event.datatransfer.setData ('text/plana', 'Hello World');

Este método lê dados do objeto DataTransfer. O parâmetro é o tipo de dados especificados no SetData. Por exemplo:

 event.datatransfer.getData ('text/planing');

Este método remove os dados armazenados no objeto Datatransfer. Os parâmetros são opcionais, para tipos de dados. Se os parâmetros estiverem vazios, limpe todos os tipos de dados. Por exemplo:

 event.datatransfer.cleardata ();

Este método está configurado para arrastar e soltar ícones usando elementos IMG. Receba os três parâmetros, o primeiro é o elemento do ícone, o segundo é o deslocamento do eixo x do elemento do ícone do ponteiro do mouse, e o terceiro é o deslocamento do eixo y do elemento do ícone do ponteiro do mouse. Por exemplo:

 VAR OROMBE = Document.getElementById ('Origem'), ICON = Document.CreateElement ('IMG'); 10, -10)}, false)

Esses dois atributos são combinados para definir o efeito visual de arrastar e soltar.

Vale a pena notar que o IE não suporta o objeto DataTransfer. Sim, não importa qual versão do IE seja suportada.

O uso de APIs de arrasto e soltar já está familiarizado com o acima. Vamos dar uma olhada na ideia primeiro:

1. Em uma lista, cada elemento pode ser arrastado e descartado, e a propriedade Draggable é definida como true para cada elemento.
2. Examinando o evento Dragstart de cada elemento para distinguir o estilo do objeto de origem.
3. Ao monitorar o evento Dragenter de cada elemento, quando o objeto de origem insere o elemento atual, o objeto de origem é adicionado antes do elemento. Dessa forma, os elementos por trás dele serão espremidos pelo objeto de origem, alcançando o efeito de classificação.
4. No entanto, descobrir -se -se que o objeto de origem não pode ser classificado para o último e só pode ser o segundo no penúltimo. Nesse momento, o evento Dragleave é monitorado.

O código principal é o seguinte:

 Var Source = Document.QuerySelectiverall ('. List'), DragElement = NULL; ) {dragElement = this;}, false); [i] .AddeventListener ('Drawleave', function (ev) {if (dragElement! = this) {if (this == this.parentnode.LASTELEMENTCHILD || this.parentnod E.LASTCHILD) {this.parentnode.appendChild (dragElement );}}, false)};

Endereço de código completo: arrasto-democonamente

É principalmente compatível no IE, mas pelo menos pode ser arrastado e classificado em pelo menos no IE10.

E no meu teste simples, verifica -se que, quando os elementos não são definidos no IE, o evento Dragleave não será acionado.

O ponto mais importante é o iOS e o Android, o que é completamente incompatível. Felizmente, há um plugue para torná -lo perfeitamente compatível na extremidade móvel.

Endereço do plug-in: iOS-html5-drag-drop-shim

Você só precisa apresentar o plugue -in no código original para arrastá -lo no terminal móvel.

 <Cript> var iosdragdropshim = {enableneRlave: true} </script> <script src = vendor/iOS-drop.js> </sCript>

O acima é todo o conteúdo deste artigo.