Layout-Manipulator Prototype Demo

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.


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