How JavaScript implements drag-and-drop elements in a Web page _javascript tips

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.