HTML and CSS Reference
In-Depth Information
The drag-and-drop API has come a long way. Before using the native features of the browser, developers and
designers would need to use an external library like jQuery or a plugin like Flash. Thanks to the HTML5 spec, it's now
a major component in modern browsers by default. Just about anything can be dragged: images, links, text—any
DOM node, really. Note, too, that native browser support makes for a faster and much more responsive Web or, in our
case, ad creatives. Anytime you can leverage a browser's native APIs, do it! After all, standardizing and constructing
user-friendly APIs that are hardwired into the browser environment are what HTML5 and this topic are all about.
Listing 6-1 outlines how DnD can be used in a very simple ad, one where the publisher is a product manufacturer and
the ad is a drop zone for products to be saved with drag-and-drop.
Listing 6-1.
Drag-and-Drop Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#ad {
width:300px;
height:250px;
border:1px solid #000;
overflow: hidden;
}
#logo {
position: absolute;
top: 5px;
left: 1px;
width: 300px;
height: 250px;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 40px;
text-align: center;
color: #fff;
z-index: 3;
}
#cta {
position: absolute;
top: 220px;
left: 1px;
width: 300px;
height: 250px;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: larger;
text-align: center;
color: #fff;
z-index: 2;
}
#dropper {
position: relative;
top: 25px;
