.
Editable #1: Double-click anywhere in this paragraph to edit its content. Press TAB or click outside the edit area to finish. Press ESCAPE to cancel.
Editable #2: This can work on arbitrary markup. This may or may not be such a good idea.
We can do paragraphs, styling, links, or any HTML, really.
DADA | NHUG | TTAY | |
---|---|---|---|
DADA | 1 | 3 | |
NHUG | 1 | 2 | |
TTAY | 3 | 2 |
Without applying some kind of limitation, any markup whatsoever can be entered. In practice you would normally want to limit the type of markup allowed perhaps via a wysiwyg editor or a text formatter like Markdown.
Firefox and Safari register 'click' events after a drag causing the field to become editable, which is undesirable. This is the same problem with the sortable links and buttons example in DnD Sortable Lists.
Combining in place editing with Drag & Drop Sortable Lists results in nice direct manipulation for managing a list of labels.
List 1 | List 2 | List 3 |
---|---|---|
|
|
|
Sort only | Sort and edit (double click) | Sort and edit (single click) |
List 4 | List 5 | |
|
|
|
Drag handles | Always editable |
|