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

Source: Internet
Author: User
Tags event listener

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 '); } } }
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.