Comentário: sempre foi o que os internautas querem ver se não usam JavaScript para obter efeito de arrastar e soltar. Hoje, o HTML5 fez uma introdução detalhada a você a seguir. Amigos que precisam saber podem se referir a ele.
No desenvolvimento da Web, precisamos usar o JavaScript para obter o efeito de arrastar e soltar. Hoje vamos implementá -lo usando HTML5:
Vejamos o código html central primeiro:
<div>
<p> arraste pequenos quadrados amarelos para uma grande caixa vermelha </p>
</div>
<div draggable = "true">
</div>
<div>
</div>
A propriedade Draggable é adicionada recentemente pelo HTML5. Possui três valores: verdadeiro, falso, automático. true é arrastado, false não é permitido. O automóvel depende se o navegador do usuário o suporta. Para mais informações, consulte a documentação oficial.
Adicione um pouco de estilo:
<style type = "text/css">
#derrubar
{
Largura: 300px;
Altura: 200px;
Background-Color: #FF0000;
preenchimento: 5px;
Fronteira: 2px Solid #000000;
}
#item
{
Largura: 100px;
Altura: 100px;
Background-Color: #ffff00;
preenchimento: 5px;
margem: 20px;
Fronteira: 1px tracejado #000000;
}
*[draggable = true] {
-Moz-User-Select: Nenhum;
-khtml-user-drag: elemento;
Cursor: Mova;
}
*:-khtml-drag {
Background-Color: RGBA (238.238.238, 0,5);
}
</style>
Então vamos olhar para o JavaScript:
function lidenevent (EventTarget, EventType, EventHandler) {
if (eventtarget.addeventListener) {
EventTarget.adDeventListener (EventType, EventHandler, false);
} else if (eventtarget.attachevent) {
EventType = "on" + EventType;
EventTarget.attachevent (EventType, EventHandler);
} outro {
EventTarget ["on" + EventType] = EventHandler;
}
}
// Cancelar evento
função cancevent (evento) {
if (event.preventDefault) {
event.preventDefault ();
} outro {
event.returnValue = false;
}
}
// Cancelar propagação
função cancelpropagation (evento) {
if (event.stoppropagation) {
event.stopPropagation ();
} outro {
event.cancelbubble = true;
}
}
window.onload = function () {
var no destino = document.getElementById ("gota");
lidenevent (Target, "Dragenter", Cancevent);
lidenevent (Target, "Dragover", Dragover);
ListeNevent (Target, "Drop", Function (EVT) {
cancelPropagation (EVT);
EVT = EVT || Window.Event;
evt.datatransfer.dropeffet = 'cópia';
var id = evt.datatransfer.getData ("text");
Target.appendChild (document.getElementById (ID));
});
var item = document.getElementById ("item");
item.setAtattribute ("draggable", "true");
lidenevent (item, "dragstart", function (EVT) {
EVT = EVT || Window.Event;
evt.datatransfer.effectallowed = 'cópia';
evt.datatransfer.setData ("text", item.id);
});
};
função dragover (evt) {
if (evt.preventDefault) evt.preventDefault ();
EVT = EVT || Window.Event;
evt.datatransfer.dropeffet = 'cópia';
retornar falso;
}
A partir do código acima, analisamos os eventos de arrastar e soltar fornecidos usando um conjunto de HTML5 e olhamos diretamente para o seguinte:
arraste
O evento de arrasto começa.
arrastar
Durante a operação de arrasto.
Dragenter
O arrasto está acima do alvo; usado para determinar se o destino aceitará queda.
Dragover
O arrasto está acima do alvo; usado para determinar o feedback para o usuário.
derrubar
A queda ocorre.
arrastar
Arrastar folhas alvo.
arraste
Operação de arrasto termina.
Defina eventos relacionados para implementar a função desejada. O JS acima não é difícil de entender.
Você pode experimentar você mesmo. Atualmente, ele suporta o melhor da ópera, mas o efeito do IE não é bom.
Espero que seja útil para o seu desenvolvimento da Web.