HTML and CSS Reference
In-Depth Information
This uses the CSS attribute selector (the square brackets) to fi nd
all the elements with the property enabled, and then applies the
behaviour to enable the user to drag the element.
Aside from the CSS fudge that you have to add to kick Safari 4
into life, dragging any element isn't too hard, and it means you
can now create complicated objects in the DOM that the user
can move around and drop into other windows or applications.
Yo u c a n a d d y o u r o w n c u s t o m d r a g i c o n w h e n d r a g g i n g a n
element. On the
dragstart
event, you can use the
setDragImage
method to associate your own image with the cursor at a
specifi c offset to the cursor.
There's, of course, a small caveat: It doesn't work in IE, and in
Safari, you can't override the cursor if dragging text, images, or
links. But we're optimistic—let's create our own custom drag icon:
var dragIcon = document.createElement('img');
// set the drag icon to the mini twitter logo
dragIcon.src = 'http://img.tweetimag.es/i/twitter_m';
// later in the code...
element.ondragstart = function (event) {
event.dataTransfer.setDragImage(dragIcon, -10, -10);
// and do some other interesting stuff with dataTransfer
};
The result is a nice little bespoke drag icon that better repre-
sents the data you're moving around (
Figure 8.4
).
FIGURE 8.4
We've created
a custom Twitter cursor
when dragging Twitter-related
data around.
