HTML and CSS Reference
<div id="pubProduct" draggable="true" ondragstart="drag(event)"></div>
<div id="logo">Shopping Cart</div>
<div id="cta"> Drag Products To Drop Area! </div>
<div id="dropArea" ondrop=dropArea(event) ondragover=allowDrop(event)>
Hopefully you're following along in your favorite text editor. Now let's take a look at the code. First, we do some
basic ad set up and design using the CSS in the listing. Second, in the HTML we mimic having publisher content
( publisherContent ) and dropping the mock products in our publisher page onto the ad area ( ad ). Next in our
publisherContent div, there is a sample product, pubProduct , which has its attribute of draggable set to true and has
an event, ondragstart , to be handled with the function called drag(event) .
You must pass in the “event” argument; otherwise the code will not function correctly.
Next, we put some more event handlers in the ad by leveraging the ondrop and ondragover events. These events
drag we use a drag image with the method from the dataTransfer object by calling the method setDragImage() and
pass it three arguments. The first argument is the image asset, the second and third are the image's x and y coordinate
location—the place where the mouse will start the drag. This could be helpful if you want to create a custom image for
the element when the user is dragging.
Next, we tackle the allowDrop method, which signifies when the product can be dropped onto a content area. In
this case, we're using the entire ad as a drop zone.
■ By default, the dragOver and dragEnter events are not able to drop the element. You must explicitly cancel
these default browser actions by calling event.preventDefault(); to drop an element.
Last, once you know you're allowed to drop the product and once the user lets go of the mouse, that action
can be handled with the dropArea handler. Inside the dropArea method we grab the product's data by calling
the dataTransfer object again—but this time we retrieve the data by writing var data = event.dataTransfer.
getData(“Text”). Having the data object, we can then inject the data into the ad's real estate. The user now sees the
element inside the ad area, as Figure 6-1 demonstrates.