HTML5 LogoLearn how to set a custom drag image for a better drag and drop UX.

In previous articles of this series: “Getting Started with HTML5 Drag and Drop Part I: Introduction,” and “Getting Started with HTML5 Drag and Drop Part II: The dragenter and dragleave Events,” we covered the basics needed to implement HTML5 drag and drop. The second article focused on the UX for dropping a dragged element. In this article, we will cover a UX consideration for dragging: setting a custom drag image.

When dragging a draggable HTML element, the default drag image is the element being dragged. In most cases, this is probably just fine. But what about if you want to snazz-up the UX and specify a custom image for the drag operation?

Using an image that already exists on the page

When using an image that already exists in the page as your custom drag image, there are two restrictions:

  1. The image must exist in the DOM (i.e. it cannot have its “display” property set to “none,” or “visibility: hidden.”
  2. The image must be visible on the page (i.e. it must be visible without scrolling)

Example # 1

(for the base HTML, please refer to either Part I or Part II of this series; they both provide that markup).

Here is the JSfiddle link for Example # 1:

The setDragImage Method

In Example # 1, we have set the HTML5 logo as the custom drag image. We do this by using the document.getElementsByClassName method. Since this method returns an HTMLcollection, we reference the element by using the [0] property as we know we will only get one element back (yes, we could have used the document.getElementbyId method, but I wanted to keep the HTML clean).

There are a couple of drawbacks to this approach

  1. The HTML5 logo must be visible in the DOM, which is a bit restrictive
    Some browsers (e.g. Firefox) will display the image in its native size, whereas others (e.g. Google Chrome) might display it using the dimensions defined by its current CSS
  2. Using an external image for the custom drag image

Example # 2

Here is the JSfiddle link for Example # 2:

In Example # 2, we use an external image for our custom drag image. In this case it’s a silly image of Bart Simpson on his surfboard, but you can certainly use any image you desire. The advantage here is that we have much more control over the experience. We can use any image we like, and we don’t need to worry about whether or not the image we use is part of or visible in the DOM; it’s external to the DOM. Of course, you can use an image that already exists in the DOM, but you gain the greatest control when you create a new image, rather than use a reference to a DOM element.

Here is the working example for this article:

Here is the JavaScript for this article’s working example:


Setting a custom drag image may seem like icing on the cake, but it is not an uncommon case. In this article we discussed two options: using a reference to an existing image element in the DOM, as well as using an external image. There is no right or wrong answer as to which approach is best, but I hope this article has not only explained how to do this, but the pros and cons of each method.

Helpful Links for the HTML5 Drag and Drop setDragImage Method


    • kevin212 kevin212

      Hey thanks a lot John… I’m still the same kid I was when we used to mess around with trains and walkie talkies (which never really worked if I remember)… I just do this stuff for a living now : – )

      • Ayesa

        Rob – Mate that is so cool. Seriously I’m a freshie with HTML5 but that is bang on what I’ve been hunitng for.I’m wanting to create a form that includes this drag and drop style which would then be submitted and, via php, be e-mailed on. What would I have to do to attach a value to the the drag and drop sequence that could be sent as form data? Any help would be hugely appreciated.CheersRob

        • Kevin Chisholm Kevin Chisholm

          Thanks Ayesa,

          Can you be a little more specific about what kind of data you want to pass? Where does the data come from, what does it contain, and what do you want to do with it?

          I just want to be sure I understand what you are tying to accomplish.

          Best Wishes,


Comments are closed.