HTML and CSS Reference
In-Depth Information
Unfortunately, this syntax does not allow the inclusion of alternative content as shown here:
<iframe src="content.htm" height="200" width="200"
sandbox="allow-same-origin">
Your browser does not support iframes or its new HTML5 attributes.
You should be able to get a browser that does this in a few years.
</iframe>
It is still preferable to use traditional HTML-style markup to insert an
iframe
into an
HTML5 document.
At the time of this writing, HTML5 changes to
<iframe>
are not supported by any
browsers; however, Internet Explorer's
security
attribute is quite similar to the intent of
HTML5's
sandbox
attribute.
The draggable Attribute and the Drag and Drop API
HTML5 introduces drag and drop natively to the browser. Drag and drop has long been
implemented with JavaScript code that was not designed specifically for that purpose. Now
the logic is made much easier and cleaner as the HTML5 specification includes an attribute
and events that are intended exclusively for drag and drop.
In order to drag an item, the element must have the
draggable
attribute set to
true
:
<div id="dragme" class="box" draggable="true">
I am a draggable div
</div>
Everything else must be configured through JavaScript. There are several new events for
drag and drop. These are attached to HTML elements just as any other event using
addEventListener()
or
attachEvent()
.
The following events are attached to the item that will be dragged:
•
dragstart
The drag has begun.
•
drag
The element is being moved.
•
dragend
The drag has completed.
The rest of the events are attached to the drop area:
•
dragenter
The element is dragged into the drop area.
•
dragover
The element is dragged into the drop area. The default behavior here is
to cancel the drop, so it is necessary to hook up this event and then return false or
call
preventDefault()
to cancel the default behavior.
•
dragleave
The element is dragged out of the drop area.
•
drop
The element is dropped in the drop area.
Here we use JavaScript to hook up some of these events on a draggable box and a drop area:
var drag = document.getElementById("dragbox");
drag.addEventListener("dragstart",dragstart,false);
drag.addEventListener("dragend",dragend,false);
