Take the 2-minute tour ×

Trying to do a simple drag and drop example in HTML5 - but when I drop the image into the div element I get the following error.

Uncaught TypeError: Cannot set property 'innerHTML' of null

So I assume the error message means dragElement is null. I don't understand why though, because I set it in the dragstart event to be the HTML of the img element.

Anyone know how to make this work?

var dragElement = null;

$('#x').bind('dragstart', function (e) {
    dragElement = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);

$('#drop-box').bind('dragover', function (e) {
    return false;

$('#drop-box').bind('drop', function (e) {
    if (e.stopPropagation) {

    if (dragElement != this) {
        dragElement.innerHTML = this.innerHTML;
        this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');

    return false;
share|improve this question
add comment

1 Answer

up vote 12 down vote accepted

dataTransfer is part of the original event object, not the jQuery one. Use e.originalEvent instead: http://jsfiddle.net/KWut6/.

e.originalEvent.dataTransfer ...
share|improve this answer
Voted up because that was a problem, but not the problem causing the "Uncaught TypeError: Cannot set property 'innerHTML' of null" error. The error is being caused by the line: dragElement.innerHTML = this.innerHTML; –  PeteGO Nov 18 '11 at 23:05
@Pete Oakey: The fiddle works fine for me without any errors. Are you experiencing something else? –  pimvdb Nov 18 '11 at 23:07
I don't think so. How come e.dataTransfer is OK on the dragstart event but not the drop event? By the way it is an image element that I am dragging and dropping - if that makes a difference! –  PeteGO Nov 18 '11 at 23:10
It should not be available in either case. In the fiddle I've used e.originalEvent.dataTransfer everywhere. –  pimvdb Nov 18 '11 at 23:11
Sorry - changed the id of my img element during my attempts to fix. Changed it back and all works now :) –  PeteGO Nov 18 '11 at 23:24
add comment

Your Answer


