HTML5 Mdn dataTransfer setData ou getData ne fonctionne pas dans tous les navigateurs sauf Firefox

Il y a une raison pour la "protégés"....glisser / déposer peut couvrir des fenêtres complètement différentes, et ils ne voulaient pas que quelqu'un soit en mesure de mettre en œuvre un DIV "auditeur" qui écouterait sur le contenu de tout ce qui a été traîné sur elle (et peut-être envoyer ces contenus par AJAX à un serveur espion à Elbonia). Seule la zone de largage (qui est plus clairement sous le contrôle de l'utilisateur) obtient le scoop complet.

Ennuyeux, mais je peux voir pourquoi il pourrait être nécessaire.

var dragStartHandler = function (e) {
    e.originalEvent.dataTransfer.effectAllowed = "move";
    e.originalEvent.dataTransfer.setData("text/plain", this.id);
};

Le problème est avec le "text/plain". La spécification standard dans la documentation MSDN pour setData est simplement "text" (sans le /plain). Chrome accepte le / plain, mais pas IE, dans toutes les versions que j'ai essayées.

j'ai lutté avec le même problème pendant plusieurs semaines, en essayant de comprendre pourquoi mes événements "drop" ne fonctionnaient pas correctement dans IE alors qu'ils le faisaient dans CHrome. C'était parce que les données de transfert de données n'avaient pas été correctement chargées.

je sais que vous avez déjà répondu à cette question, mais c'est un bon thread -- je voulais juste ajouter un additif ici-si vous organisez vous-même vos données, vous pouvez toujours ajouter les données dans le champ lui-même (moche je sais), mais il évite d'avoir à re-créer une fonctionnalité:

par exemple, si vous définissez vos propres données personnalisées:

  dataTransfer.setData('mycustom/whatever', 'data');

ajouter les données dans une nouvelle entrée de données, et l'itération:

  dataTransfer.setData('mycustom/whatever/data/{a json encoded string even}');

requête:

// naive webkit only look at the datatransfer.types
if (dataTransfer.types.indexOf('mycustom/whatever') >= 0) {

    var dataTest = 'mycustom/whatever/data/';

    // loop through types and create a map
    for (var i in types) {

        if (types[i].substr(0, dataTest.length) == dataTest) {

            // shows:
            // {a json encoded string even}
            console.log('data:', types[i].substr(dataTest.length));

            return; // your custom handler
        }
    }
}

testé dans chrome seulement

il est également intéressant de noter que si vous quittez la chaîne d'exécution en utilisant un timeout, l'objet dataTransfer n'aura plus vos données. par exemple,

function dropEventHandler(event){
    var dt = event.dataTransfer.getData("text/plain"); // works
    var myEvent = event;

    setTimeout(function(){
       var dt = myEvent.dataTranfer.getData("text/plain"); // null
    }, 1);
}

j'ai été faire la même erreur pour le code ci-dessous:

événement.originalEvent.dataTransfer.setData ("text / plain", événement.cible.getAttribute ('id'));

j'ai changé le code en:

événement.originalEvent.dataTransfer.effectAllowed = "déplacer"; événement.originalEvent.dataTransfer.setData("texte", un événement.cible.getAttribute ('id'));

et ça a marché pour moi.