This article illustrates how JavaScript implements drag-and-drop elements within a Web page. Share to everyone for your reference. Specifically as follows:
This code details the JS drag and drop principle and method, it is worth learning and reference.
/** * 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.
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 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 positioning of the common drag interface * @param {Node} Dragger need 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 | | Compatible coordinate properties var Pagex = E.clientx | |
E.pagex; var pagey = E.clienty | |
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 ', Fu
Nction (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 ';
Set y-coordinate dragger.style.top = y-offyl + ' px ';
}); Listening for drag end Events Dragger.ondragend = bindevent (document, ' onmouseup ', function (e) {//releasePre-Read Event object var x = E.clientx | |
E.pagex; var y = E.clienty | |
E.pagey//Release drag monitor and end monitor removeevent (document, ' onmousemove ', Dragger.ondrag);
Removeevent (document, ' onmouseup ', dragger.ondragend);
try {//delete the properties used by the drag, compatible with FF using the delete Dragger.ondrag;
Delete Dragger.ondragend;
catch (E) {//delete the properties used when dragging, compatible with IE6 using Dragger.removeattribute (' 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, compatible with FF using the delete Dragger.ondrag;
Delete Dragger.ondragend;
catch (E) {//delete the properties used when dragging, compatible with IE6 using Dragger.removeattribute (' Ondrag ');
Dragger.removeattribute (' ondragend '); }
}
}
The
wants this article to help you with your JavaScript programming.