In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > setDragImage (dataTransfer)

setDragImage method (dataTransfer)

Browser support:

	3.5

Specifies the feedback image and the mouse cursor position for the current drag-and-drop operation.

Note: The dataTransfer object and its setDragImage method are supported in Firefox from version 3.5.

By default, the feedback image is created based on how the dragged content is rendered in the current browser window, but it can be modified with the addElement and setDragImage methods.

The setDragImage method is a little more general than the addElement method, with the setDragImage method not only the new drag image can be specified, but also the position of the mouse cursor relative to the new image. Both methods support arbitrary element to use as the drag feedback image.

If the specified element is an image element (img or input:image), the addElement method creates the feedback image in the same size as the specified image is rendered in the browser window while the setDragImage method creates the feedback image in the original size of the specified image.
If the specified element is not an image element, both methods creates the feedback image based on how the element is rendered in the current browser window.

Note: In Google Chrome and Safari, use the webkitUserDrag style property and the setDragImage method together.

Syntax:

object.setDragImage (elemForImage, x, y);

You can find the related objects in the Supported by objects section below.

Parameters:

elemForImage

Required. Reference to the element that needs to be used as the drag feedback image. If this parameter is null, the default drag image will be used.

Required. Integer that specifies the horizontal position of the mouse cursor relative to the left side of the feedback image, in pixels.

Required. Integer that specifies the vertical position of the mouse cursor relative to the top side of the feedback image, in pixels.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the addElement and setDragImage methods.

<head>
    <style>
        .drag {
             -webkit-user-drag: element;
             -webkit-user-select: none;
        }
    </style>
    <script type="text/javascript">
        function SetFeedbackImage (event, useAddElement) {
            if (event.dataTransfer) {
                var rainbow = document.getElementById ("rainbow");
                if (useAddElement) {
                    if (event.dataTransfer.addElement) {
                        event.dataTransfer.addElement (rainbow);
                    }
                    else {
                        alert ("Your browser does not support the addElement method.");
                    }
                }
                else {
                    if (event.dataTransfer.setDragImage) {
                        event.dataTransfer.setDragImage (rainbow, 0, 0);
                    }
                    else {
                        alert ("Your browser does not support the setDragImage method.");
                    }
                }
            }
            else {
                alert ("Your browser does not support the dataTransfer object.");
            }
        }
    </script>
</head>
<body>
    <img id="rainbow" src="rainbow.gif" width="40px" />
    <br /><br />
    Please start to drag the first picture first and the second one next.
    The drag feedback images will be different.
    <br /><br />
    <b>Picture 1.</b><br />
    <img class="drag" src="border.png" ondragstart="SetFeedbackImage (event, true)" />
    <br /><br />
    <b>Picture 2.</b><br />
    <img class="drag" src="border.png" ondragstart="SetFeedbackImage (event, false)" />
</body>