Arrastrarse es algo muy genial. Haga clic en un objeto, mantenga presionado el mouse, mueva el mouse a otra área y suelte el botón del mouse para colocar el objeto aquí.
Aquí hay un caso simple:
Parte de HTML: Tenga en cuenta que los elementos de arrastre deben definirse absolutamente, es decir, POSICIÓN = Absoluto;
La copia del código es la siguiente: <Div style = "Posición: Absolute; Altura: 100px; ancho: 100px; fondo: rojo"> </div>
<script src = "dome.js"> </script>
JS Part (Dome.js):
var eventUtil = {// Obtener el evento y el objetivo getEvent: function (event) {return Event? Evento: Window.event; }, getTarget: function (evento) {return Event.target || Event.srcelement; }, // Agregar Evento de escucha AddEvent: function (Element, Type, Handler) {if (element.addeventListener) {element.addeventListener (type, handler, falso); } else if (element.attachevent) {element.attachevent ("on" + type, manejador); }}, // Soge el evento de escucha delevent: function (element, type, handler) {if (element.removeEventListener) {element.removeEventListener (type, handler, falso); } else if (element.detachevent) {element.detachevent ("on" + type, manejador); }}} var dragDrop = function () {// El indicador para determinar si el elemento DOM se está arrastrando var dragging = null; // La diferencia entre la esquina superior izquierda del elemento DOM y el puntero del mouse es diffx = 0; diffy = 0; función handleEvent (evento) {event = eventUtil.getEvent (evento); var Target = eventUtil.getTarget (evento); switch (event.type) {case "mouseDown": // determina si la clase del elemento DOM contiene el atributo draggable if (target.classname.indexof ("draggable")> -1) {dragging = target; diffx = event.clientx - target.offsetleft; diffy = event.clienty - target.offsettop; } romper; caso "mouseMove": if (dragging! = null) {target.style.left = event.clientx - diffx + "px"; Target.style.top = event.clienty - diffy + "px"; } romper; caso "MouseUp": dragging = null; romper; }} return {enable: function () {eventUtil.addevent (documento, "MouseDown", manejar); EventUtil.addevent (documento, "MouseMove", manejar); EventUtil.addevent (documento, "mouseup", handleEvent); }, deshabilitar: function () {eventUtil.delevent (documento, "MouseDown", manejar); EventUtil.delevent (documento, "MouseMove", manejar); EventUtil.delevent (documento, "mouseup", handleEvent); }}} (); DragDrop.enable ();Lo que debe explicarse aquí son Diffx y Diffy, que representan la diferencia entre la esquina superior izquierda del elemento y el puntero del mouse.
diffx = x coordenada del mouse - offsetsetLetft del objeto del elemento
DiFfy = y coordenada del ratón - offsettop del objeto de elemento
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.