Implement the drag function in js

This article mainly introduces examples of js drag-and-drop effects, which has good reference value. Let's take a look at the following example. This article mainly introduces examples of js drag-and-drop effects, which has good reference value, let's take a look at it with the small Editor.

(You can drag any Red Square)

The Code is as follows:

 
  
  
  
  
  Document    
 Script window. onload = function () {var d1 = document. getElementById ("d1"); d1.onmousedown = function (e) {var mouseX = e. clientX; var mouseY = e. clientY; // calculate xy var pianyiX = mouseX-d1.offsetLeft; var pianyiY = mouseY-d1.offsetTop; document. onmousemove = function (e) {var newX = e. clientX-pianyiX; var newY = e. clientY-pianyiY; d1.style. marginLeft = newX + "px"; d1.style. marginTop = newY + "px" ;}}; document. onmouseup = function (e) {document. onmousemove = null ;};}/* result, the onmousemove above should be written on the document, and I should write it on p, resulting in an error */script

For more articles about how to implement the drag and drop function in js, refer to PHP Chinese network!