Use JavaScript to drag elements in a webpage.

Use JavaScript to drag elements in a webpage.

This example describes how to drag elements from a webpage using JavaScript. Share it with you for your reference. The details are as follows:

This code details the principles and methods of JS drag and drop, which is worth learning and learning.

/*** Cross-platform event listening Function * @ param {Node} node the DOM Node that needs to listen to the event * @ param {String} eventType the event type to listen to * @ param {Function} callback event listening callback Function * @ type Function returns the Function type * @ return returns the reference of the listener callback Function, used to release the listener */function bindEvent (node, eventType, callback) {if (node. attachEvent) {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 listening unload function * @ param {Node} node the DOM Node that needs to uninstall the listening event * @ param {String} eventType the event type to be uninstalled * @ param {Function} callback uninstall event listening 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 );}} /*** universal drag interface compatible with different positioning Methods * @ param {Node} the elements to be dragged by dragger * // The system must be notified of which elements can be interacted, which of the following functions does not work? function canDrag (dragger) {var drag = bindEvent (dragger, 'onmousedown', function (e) {// compatible with event object e = e | event; // compatible with the coordinate property var pageX = e. clientX | e. pageX; var pageY = e. clientY | e. pageY; // Compatible with the style object var style = dragger. currentStyle | window. getComputedStyle (dragger, null); // if left and top attributes are not set, the default value of IE is auto var offX = parseInt (style. left) | 0; var offY = parseInt (style. top) | 0; // obtain the spacing between the mouse and the element var offXL = pageX-offX; var offYL = pageY-offY; // Add the onDrag attribute to the dragger, used to store the drag event if (! Dragger. onDrag) {// listen to the dragger drag event. 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-offXL + 'px '; // you can specify the Y coordinate to dragger. style. top = y-offYL + 'px ';}); // listen to the dragger Event After dragging. onDragEnd = bindEvent (document, 'onmouseup', function (e) {// read event object var x = e before release. clientX | e. pageX; var y = e. clientY | e. pageY // release the removeEvent (document, 'onmousemove ', dragger. onDrag); removeEvent (document, 'onmouseup', dragger. onDragEnd); try {// delete the attribute used when dragging, compatible with FF using delete dragger. onDrag; delete dragger. onDragEnd;} catch (e) {// Delete the attributes used for dragging. compatible with IE6's use of dragger. removeAttribute ('ondrag'); dragger. removeAttribute ('ondragend') ;}}}}); return function () {// return a function reference that can cancel the drag function // release the drag listener and terminate the listener removeEvent (document, 'onmousemove ', dragger. onDrag); removeEvent (document, 'onmouseup', dragger. onDragEnd); try {// delete the attribute used when dragging, compatible with FF using delete dragger. onDrag; delete dragger. onDragEnd;} catch (e) {// Delete the attributes used for dragging. compatible with IE6's use of dragger. removeAttribute ('ondrag'); dragger. removeAttribute ('ondragend ');}}}

I hope this article will help you design javascript programs.