How JavaScript implements drag-and-drop elements within a Web page

This code details the JS drag and drop principle and method, it is worth learning and reference.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

/** * Cross-platform Event Listener * @param {node} node needs to listen for event DOM nodes * @param {String} EventType event type required to listen * @param {Function} callback event Supervisor Listen to callback function * @type function return value is type * @return returns a reference to the listener callback function, which is used to release the Listener/function bindevent (node, EventType, callback) {if Node.a Ttachevent) {if (Eventtype.indexof (' on ')) {EventType = ' on ' + EventType;} node.attachevent (EventType, callback);} else {if (!eventtype.indexof (' on ')) EventType = eventtype.substring (2, eventtype.length); Node.addeventlistener (EventType , callback, false); return callback; /** * Cross-platform Event listener unload function * @param {node} node needs to uninstall the DOM nodes of the listener event * @param {String} eventtype the listener's event type * @param {Function} callb ACK Uninstall Event Listener callback function/function removeevent (node, EventType, callback) {if (node.detachevent) {if (Eventtype.indexof (' on ')) { EventType = ' on ' + EventType;} Node.detachevent (EventType, callback); else {if (!eventtype.indexof (' on ')) EventType = eventtype.substring (2, eventtype.length); Node.removeeventlistener ( EventType, callback, false); }}/** * compatible with different positioningUniversal Drag Interface * @param {Node} dragger the element to be dragged//must tell the system which elements are capable of interacting and which are not function Candrag (dragger) {var drag = Bindevent (Dragger, ' onmousedown ', function (e) {//compatible event object e = e | | | events;//compatible coordinate attribute var Pagex = E.clientx | | E.pagex; var pagey = E.clie Nty | | E.pagey; Compatible Style object var style = Dragger.currentstyle | | window.getComputedStyle (Dragger,null); When the left and top properties are not set, the default value for IE is auto var offx = parseint (style.left) | | 0; var offy = parseint (style.top) | | 0; Gets the mouse's spacing relative to the element var offxl = PAGEX-OFFX; var offyl = Pagey-offy; Add Ondrag property for Dragger to store drag event if (!dragger.ondrag) {//Listener drag Event Dragger.ondrag = bindevent (document, ' onmousemove ', Function (e) {e = e | | event; var x = E.clientx | | e.pagex var y = e.clienty | | e.pagey//SET X coordinate dragger.style.left = X-o FFXL + ' px '; Set y-coordinate dragger.style.top = y-offyl + ' px '; }); Listening for drag end Events Dragger.ondragend = bindevent (document, ' onmouseup ', function (e) {//Before release read Event object var x = E.clientx | | E.pagex; var y = E.clienty | | E.pagey//Release drag monitoring and End monitoring Removeevent (document, ' OnmOusemove ', Dragger.ondrag); Removeevent (document, ' onmouseup ', dragger.ondragend); try {//delete the properties used by the drag, and the compatible FF uses the delete dragger.ondrag; Delete Dragger.ondragend} catch (e) {//delete the properties used when dragging, compatible IE6 use Dragger.remo Veattribute (' Ondrag '); Dragger.removeattribute (' ondragend '); } }); } }); return function () {//Returns a function reference that can cancel the drag function//release drag monitor and End listener removeevent (document, ' onmousemove ', Dragger.ondrag); Removeevent (document, ' onmouseup ', dragger.ondragend); try {//delete the properties used by the drag, and the compatible FF uses the delete dragger.ondrag; Delete Dragger.ondragend} catch (e) {//delete the properties used when dragging, compatible IE6 use Dragger.remo Veattribute (' Ondrag '); Dragger.removeattribute (' ondragend '); } } }