Programmer Clique em

Arrastar e soltar (arrastar e soltar) é parte integrante do padrão HTML5. Qualquer item pode ser arrastado e descartado. Literalmente, arrastar e soltar é pegar um objeto e arrastá-lo para outro local.

Na documentação oficial do MDN, a função de arrastar e soltar é descrita da seguinte forma: O HTML de arrastar e soltar permite que os aplicativos usem a funcionalidade de arrastar e soltar no Firefox e outros navegadores. Por exemplo, através dessas funções, os usuários podem usar o mouse para selecionar elementos arrastados, arraste itens para drones e coloque esses itens liberando o botão do mouse. Um elemento translúcido do elemento de arrastamento indica que o ponteiro do mouse é seguido durante a operação da unidade.

Para aplicativos de sites, extensões e xul, você pode personalizar os tipos de elementos que podem ser arrastados, o tipo de comentários gerado pelos elementos arrastados e os itens que podem ser colocados.

Nota: O elemento IMG e um item (devem especificar o href) permitem arrastar e soltar por padrão.

olhar Em um exemplo:

<!DOCTYPE HTML><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 200px; height: 100px; padding: 10px; border: 1px solid red; } </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Arrastre y suelte la imagen en el rectángulo:</p> <div ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img src="drag-image.png" draggable="true" ondragstart="drag(event)" /> </body></html>

Determine o que é arrastado ( Como o IMG pode ser arrastado e dropful por padrão, o elemento que pode ser arrastado para o código acima também pode ser escrito e para outros elementos: Para tornar o elemento rastreado, primeiro definir o atributo de arrastar em true, mais o global ondragstart Função do controlador de eventos
Definir dados de arrasto de cada traineira Atributo Datatransfer para salvar os dados do evento. Essa propriedade (Datatransfer Object) também tem métodos para gerenciar dados de arrastar. O método setData () adiciona os dados de arrastar de um item, conforme mostrado no seguinte código de exemplo:

function drag(ev){ ev.dataTransfer.setData("Text",ev.target.id);}

Neste exemplo, o tipo de dados é ” Texto “e o valor é o ID do elemento arrastado (” Drag1 “). Defina uma área de outono
O evento OneDragover especifica onde colocar os dados arrastados. Por padrão, os dados / elementos não podem ser colocados em outros elementos. Se você precisar definir o local permitido, devemos evitar o manuseio predeterminado dos itens da seguinte forma:

site quando os dados arrastados são colocados, Se produz um evento de outono. Como segue:

function drop(ev) { // Llame a preventDefault () para evitar el procesamiento predeterminado de datos por parte del navegador ev.preventDefault(); // Obtenga los datos que arrastra el método dataTransfer.getData ("Texto"). Este método devolverá cualquier conjunto de datos al mismo tipo en el método setData (). var data = ev.dataTransfer.getData("Text"); // Los datos arrastrados son la identificación del elemento arrastrado ("drag1"), agregue el elemento arrastrado al elemento colocado (elemento de destino) ev.target.appendChild(document.getElementById(data));}

para mais detalhes, consulte: MDN Arrastar e soltar ~

Leave a Comment

O seu endereço de email não será publicado. Campos obrigatórios marcados com *