Arrastar é uma coisa muito legal. Você clica em um objeto, mantenha pressionado o mouse, move o mouse para outra área e libera o botão do mouse para colocar o objeto aqui.
Aqui está um caso simples:
Parte HTML: Observe que os elementos de arrastar devem ser definidos
A cópia do código é a seguinte: <div style = "posição: absoluto; altura: 100px; largura: 100px; fundo: vermelho"> </div>
<script src = "Dome.js"> </sCript>
JS Part (Dome.js):
var eventUtil = {// Obtenha o evento e o Target GetEvent: function (event) {retornar evento? Evento: Window.Event; }, getTarget: function (event) {return event.target || Event.srcelement; }, // Adicione o evento de escuta addEvent: function (elemento, tipo, manipulador) {if (element.addeventListener) {element.addeventListener (tipo, manipulador, false); } else if (element.attachevent) {element.attachevent ("on" + tipo, manipulador); }}, // Logre o evento de escuta Delevent: function (elemento, tipo, manipulador) {if (element.RemoveEventListener) {element.RemoveEventListener (tipo, manipulador, false); } else if (element.detachevent) {element.detachevent ("on" + tipo, manipulador); }}} var dragdrop = function () {// o sinalizador para determinar se o elemento DOM está sendo arrastado var arrasging = null; // A diferença entre o canto superior esquerdo do elemento DOM e o ponteiro do mouse é diffx = 0; diffy = 0; function handleEvent (event) {event = eventUtil.getevent (evento); var no destino = eventUtil.getTarget (evento); switch (event.type) {case "mousedown": // Determine se a classe do elemento DOM contém o atributo draggable if (Target.className.indexof ("draggable")> -1) {dragging = Target; diffx = event.clientX - Target.OffSetLeft; diffy = event.clienty - Target.OffSettop; } quebrar; case "mousemove": if (arrastando! = null) {target.style.left = event.clientx - diffx + "px"; Target.style.top = event.clienty - diffy + "px"; } quebrar; case "mouseup": arrastando = nulo; quebrar; }} retornar {enable: function () {eventUtil.addevent (documento, "mousedown", handlevent); EventUtil.addevent (documento, "mousemove", handlevent); EventUtil.addevent (documento, "mouseup", handlevent); }, desativar: function () {eventUtil.Delevent (documento, "mousedown", handlevent); EventUtil.Delevent (Document, "MouseMove", HandleEvent); EventUtil.Delevent (documento, "mouseup", handlevent); }}} (); Dragdrop.enable ();O que precisa ser explicado aqui são diffx e diffy, que representam a diferença entre o canto superior esquerdo do elemento e o ponteiro do mouse.
DIFFX = X Coordenada do mouse - OffsetLeft do objeto elemento
Diffy = Y Coordenada do mouse - Offsettop do objeto elemento
O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.