JavaScript achieves simple drag effect, while javascript achieves drag

JavaScript achieves simple drag effect, while javascript achieves drag

DragIt's a cool thing. Click an object, hold down the mouse, move the mouse to another area, and release the mouse button to place the object here.
The following is a simple case:
HTML: note that the drag element must be absolutely defined, that is, position = absolute;

Copy codeThe Code is as follows: <div style = "position: absolute; height: 100px; width: 100px; background: red" class = "draggable"> </div>
<Script src = "dome. js"> </script>

JS section (dome. js ):

Var EventUtil = {// get the event and the target getEvent: function (event) {return event? Event: window. event;}, getTarget: function (event) {return event.tar get | event. srcElement;}, // Add listening event addEvent: function (element, type, handler) {if (element. addEventListener) {element. addEventListener (type, handler, false);} else if (element. attachEvent) {element. attachEvent ("on" + type, handler) ;}, // deregister the listener event delEvent: function (element, type, handler) {if (element. removeEventL Istener) {element. removeEventListener (type, handler, false);} else if (element. detachEvent) {element. detachEvent ("on" + type, handler) ;}}var DragDrop = function () {// identify whether the DOM element is being dragged var dragging = null; // difference between the upper left corner of the DOM element and the mouse pointer 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 ();

DiffX and diffY indicate 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 the content of this article, hoping to help you learn.