Layout-Manipulator Prototype Demo

This is a <nav> element with its float property set to "left".

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The current version of the prototype NodeList-manipulator prototype can only move the child elements of a single element. In this demo page, that parent element is the part with a light gray background. It is an <article> element. This sentence text is represented by one or more TextNodes in the DOM whose parent is the <article> element, so when you pass the mouse over the sentence, the whole <article> element gets highlighted.

(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.

TODO

(This is another <article> element.)

It is easy for a user to miss the fact that the <hr> element above can be selected by the mouse because it does not have much height. Any element with a small computed value for its height will present the same difficulty. It might be a good idea to set a minimum height of about 5 or 10 pixels to every element.