Javascript pour faire Glisser et Drop en HTML5

Essayer de faire un simple glisser-déposer exemple en HTML5 mais lorsque je déposer l'image dans l'élément div, j'obtiens l'erreur suivante.

Uncaught TypeError: Impossible de définir la propriété 'innerHTML', null

Donc je suppose que le message d'erreur signifie dragElement est null. Je ne comprends pas pourquoi, parce que je l'ai mis dans l'événement dragstart être dans le code HTML de l'élément img.

Quelqu'un sait comment faire ce travail?

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) {
    e.preventDefault();
    return false;
});

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

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

    return false;
});

OriginalL'auteur PeteGO | 2011-11-18

  1. 20

    dataTransfer fait partie de l'événement d'origine de l'objet, pas le jQuery. Utilisation e.originalEvent à la place: http://jsfiddle.net/KWut6/.

     e.originalEvent.dataTransfer ...

    HTML

    <image src="http://lorempixum.com/100/100/" draggable="true" id="x">
<div id="drop-box">a</div>

    JavaScript

    var dragElement = null;

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

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

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

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

    return false;
});
    Voter parce que c'était un problème, mais pas le problème à l'origine de la "Uncaught TypeError: Impossible de définir la propriété 'innerHTML', null" erreur. L'erreur est causée par la ligne: dragElement.innerHTML = ce.innerHTML;
    Oakey: Le violon fonctionne très bien pour moi sans aucune erreur. Éprouvez-vous quelque chose d'autre?
    Je ne le pense pas. Comment se fait-e.dataTransfer est OK sur l'événement dragstart mais pas la baisse de l'événement? Par la façon dont elle est un élément de l'image que je suis glisser-déposer, si cela fait une différence!
    Il ne devrait pas être disponible dans les deux cas. En coulisse, j'ai utilisé e.originalEvent.dataTransfer partout.
    Désolé changé l'id de mon élément img lors de mes tentatives de les corriger. Changé en arrière et tout fonctionne maintenant 🙂

    OriginalL'auteur pimvdb