HTML and CSS Reference
In-Depth Information
WYSIWYG editors. For that type of editing, you need to incorporate JavaScript and
utilize the local storage Application Programming Interface (API) (see Chapter 8 ).
A good example of when to use contenteditable is for demonstrating how text should
look when styled with CSS rules or set with a certain typeface, while allowing users to
edit their own text (see Figure 1-11 ).
Figure 1-11. Once focus is set on an element assigned contenteditable, Firefox 5.0 displays a gray
dotted line around it, indicating the area that can be edited
See Also
The W3C Working Draft discussion on user interaction includes the contentedita
ble attribute at .
1.21 Setting the Stage for Native Drag-and-Drop
You want to allow users to drag and drop content on your web page.
Add the draggable attribute to the element that should be draggable:
<h2 draggable >Block-Level Links</h2>
draggable , like contenteditable , has good browser support and was originally intro-
duced for IE (by default, certain elements are already draggable: a and img ). However,
the simple addition of draggable to your elements does not create the drag-and-drop
functionality on its own. draggable simply allows you to specify the elements that
can be dragged.
To achieve the desired drag-and-drop functionality, you need JavaScript to:
Search WWH ::

Custom Search