Dragging is a very cool thing. You click on an object, hold down the mouse, move the mouse to another area, and release the mouse button to place the object here.
Here is a simple case:
HTML part: Note that dragging elements must be defined absolutely, that is position = absolute;
The code copy is as follows: <div style="position:absolute;height:100px;width:100px;background:red"></div>
<script src="dome.js"></script>
JS part (dome.js):
var EventUtil = { // Get the event and target getEvent : function (event) { return event ? event : window.event; }, getTarget : function (event) { return event.target || event.srcElement; }, // Add listen event addEvent : function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } }, // Log out the listening event delEvent : function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } }}var DragDrop = function () { // The flag to determine whether the DOM element is being dragged var dragging = null; // The difference between the upper left corner of the DOM element and the mouse pointer is diffX = 0; diffY = 0; function handleEvent(event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); switch (event.type) { case "mousedown" : // Determine whether the class of the DOM element contains the draggable attribute if (target.className.indexOf("draggable") > -1) { dragging = target; diffX = event.clientX - target.offsetLeft; diffY = event.clientY - target.offsetTop; } break; case "mousemove" : if (dragging != null) { target.style.left = event.clientX - diffX + "px"; target.style.top = event.clientY - diffY + "px"; } break; case "mouseup" : dragging = null; break; } } return { enable : function () { EventUtil.addEvent(document, "mousedown", handleEvent); EventUtil.addEvent(document, "mousemove", handleEvent); EventUtil.addEvent(document, "mouseup", handleEvent); }, disable : function () { EventUtil.delEvent(document, "mousedown", handleEvent); EventUtil.delEvent(document, "mousemove", handleEvent); EventUtil.delEvent(document, "mouseup", handleEvent); } }}();DragDrop.enable();What needs to be explained here are diffX and diffY, which represent the difference between the upper left corner of the element and the mouse pointer.
diffX = x coordinate of the mouse - offsetLeft of the element object
diffY = y coordinate of the mouse - offsetTop of the element object
The above is all about this article, I hope it will be helpful to everyone's learning.