Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 8: Drag and Drop > Adding custom drag icons

Adding custom drag icons

You can add your own custom drag icon when dragging an element. On the dragstart event, you can use the setDragImage method to associate your own image with the cursor at a specific offset to the regular cursor image.

There is, 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
};


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint