Implement Div drag and drop using JavaScript

Hands-on exercises can really discover many problems. If there is a problem, it is better to solve it early. Haha ~ Still confused ~ I don't know where to find the answer. Remember it first, and I will look back later ~

<! Doctype HTML> 
After reading the tutorial, follow your own understanding and then write this drag to find a bug. This is an event that adds mouse clicks and loose to the DIV object, and the display is normal. However, when we click this Div and drag it beyond the visible area of the browser and then release the mouse, we can see that it does not trigger the onmouseup event of the Div. Therefore, the DIV keeps moving with the mouse without clicking it.
Then go back to the tutorial code, as shown below:

<! Doctype HTML> 
In this tutorial, The onmouseup event is bound to the document, so that the mouse moves out of the visible area and the event can still be triggered when it is released, so everything is normal. Then I began to get confused again. Why should onmouseup be written in onmousedown? It is reasonable to say that although the two of them have a forward and backward relationship, they click "release" first, but there is no such relationship, just like moving the mouse in and out, I usually write it out in the function, so I gave it onmouseup. The result is wrong, and Div keeps moving with the mouse, releasing it does not seem to trigger the onmouseup function ....

<! Doctype HTML> 
After reading the code several times, you can see that this function is actually triggered. The onmouseup is bound to the document, and the onmouseup is cleared when the mouse is released, that is, this function is executed only once. So we can remove the document. onmouseup = NULL; above.
Confused 1. When the onmouseup event is bound to the document, the event on the document can still be triggered when the mouse is removed from the div;

Confused 1. Here, the two sentences in the box empty the onmousemove and onmouseup functions. Why can these two functions be triggered when you click Div for the second time? Isn't the content in them cleared?

Confused 2. Despite multiple clicks, the function in the red box below is only executed once, and only one window is displayed. How many executions can be performed above ???

I am also busy solving problems when I pass ~