I have drag and drop functionality on one of my sites. Once you start dragging one of my dragable divs, there is a transparent preview of the dragged element. This is actually in the way of my users placing the element accurately, as what they are dragging does not directly reflect what is dropped.

Is there a way to remove, or better yet, change the drag preview to a different image?

I have drag and drop functionality on one of my sites. Once you start dragging one of my dragable divs, there is a transparent preview of the dragged element. This is actually in the way of my users placing the element accurately, as what they are dragging does not directly reflect what is dropped.

Is there a way to remove, or better yet, change the drag preview to a different image?

• javascript
• jquery
• html
• css
• drag-and-drop

1 Answer 1

I believe you can use the SetDragImage function which is part of the Data Transfer API

The following link has some sample Javascript which attaches an event to the ondragstart event. Using the DataTransfer API you can then set the Drag Image of the event with any Image you want, even an invisible image.

.dragdemo {
    width: 170px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border-radius: 6px;
    background: green; color: #efe;
}

<div id="drag-something" class="dragdemo" draggable="true">drag me</div>
<script>
document.getElementById("drag-something").addEventListener("dragstart", function(e) {
    var crt = this.cloneNode(true);
    crt.style.backgroundColor = "red";
    crt.style.display = "none"; /* or visibility: hidden, or any of the above */
    document.body.appendChild(crt);
    e.dataTransfer.setDragImage(crt, 0, 0);
}, false);
</script>

http://www.kryogenix.org/code/browser/custom-drag-image.html

Hope this helps