(Note: a paragraph begins here.) As you pass the mouse pointer over any child element in the gray-background <article> element, that child will be highlighted by an aqua border of 3 pixels and a margin of (at least) 2 pixels. Please try it. Another thing to try is clicking on a paragraph or line in the light-gray part of the web page—without moving the mouse. You will see a red border around the area where you can drag the paragraph or line and a cursor indicating the directions in which you can drag it.
Here is a second paragraph. Any paragraph or horizontal line inside the red box can be dragged and dropped after any paragraph or line inside the blue box. Please try it. (Note: This paragraph contains some inline elements—an image and a span, which are here to support tests of a future DMI GUI that can handle both block elements and inline elements. Inline-element handling is not supported for this web page yet. Here is the image: Here is the span.)
Here is a third paragraph. You will see that when you click on a paragraph or line inside the blue box and drag the mouse upward or downward, you get feedback to show that you are dragging the paragraph or line; however, the NodeList position of the paragraph or line is affected only until the mouse button is released. Then the paragraph or line is removed from the DOM and re-appended after another paragraph or line and its position value is returned to what it was before the drag procedure.
This is the last paragraph in the first <article> element.