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
http://www.w3.org/TR/html5/editing.html#contenteditable
.
1.21 Setting the Stage for Native Drag-and-Drop
Problem
You want to allow users to drag and drop content on your web page.
Solution
Add the
draggable
attribute to the element that should be draggable:
<h2
draggable
>Block-Level Links</h2>
Discussion
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:
