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

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

addElement method (dataTransfer)

Browser support:

	3.5

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

Note: The dataTransfer object and its addElement 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.

Syntax:

object.addElement (elemForImage);

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.

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>