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"
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.
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");
Search WWH ::

Custom Search