Question Quel format (type MIME) dois-je utiliser pour les opérations de glisser-déposer HTML5?


Je commence à expérimenter avec HTML5 Drag and Drop. Ensuite, dans le gestionnaire d'événement dragstart, nous devons exécuter setData(), qui reçoit deux paramètres: format et Les données.

function dragstart_handler(ev) {
    ev.dataTransfer.setData('text/plain', 'foobar');
}

Je veux faire glisser un "objet" d'un conteneur dans un autre conteneur, à l'intérieur de mon application Web. Par "objet", je veux dire quelque chose qui a plusieurs attributs (couleur, texte, auteur, date, ...).

Quelle sorte de format (ou type MIME) dois-je utiliser?

  • text/plain?
  • text/x-myapp-myobjtype?
  • application/x-myapp-myobjtype?
  • application/x-myapp.myobjtype+json?
  • autre chose?
  • plus d'un?

Comment devrais-je encoder mon objet (le Les données paramètre de setData())?

  • Clé séparée par des virgules (ou tout autre délimiteur) = paires de valeurs?
  • Sérialiser l'objet en utilisant JSON?
  • Juste un identifiant, et au dropzone je dois récupérer l'objet complet en utilisant juste l'id?
  • Envoyer juste une référence à l'objet, sans même sérialiser quoi que ce soit? (pas possible, le Les données l'argument doit être une chaîne)

(Je me rends compte que "comment encondrer un objet pour Drag and Drop" pourrait être une autre question ici, mais il est étroitement lié au choix du type MIME)


Quelques références:


19
2017-07-20 19:05


origine


Réponses:


La spécification HTML5 contient des exemples de glisser-déposer (voir le projet de travail actuel ou la dernière version). Dans ces exemples, un type MIME personnalisé est utilisé et l'utilisation de types MIME spécifiques à un site est également suggérée. Voir cet extrait:

<p>Drop your favorite fruits below:</p>
<ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
 <-- don't forget to change the "text/x-example" type to something
 specific to your site -->
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
[...]

Donc, c'est génial, cela signifie que nous devrions utiliser un type MIME personnalisé! (sauf si vous faites glisser du texte brut, ou simplement une URL, ou quelque chose qui a déjà un type bien connu)

Mais comment créer un tel type MIME personnalisé?

Je n'ai trouvé aucune documentation à ce sujet, alors j'ai examiné d'autres types MIME. le liste des types de média texte n'avait rien de spécial, mais le liste des types de média d'application était très intéressant. Permettez-moi de prendre un échantillon de cette liste:

application/atom+xml
application/xhtml+xml
application/xmpp+xml

application/vnd.google-earth.kml+xml
application/vnd.google-earth.kmz
application/vnd.iptc.g2.newsitem+xml
application/vnd.iptc.g2.packageitem+xml
application/vnd.nokia.iptv.config+xml
application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml
application/vnd.yamaha.openscoreformat.osfpvg+xml

application/vnd.hal+json
application/vnd.hal+xml

Je peux remarquer un motif pour faire des noms:

  • Un point sépare hiérarchiquement plusieurs "éléments" (par exemple, config est enfant de iptv, c'est l'enfant de nokia, c'est l'enfant de vnd).
  • Un trait d'union sépare les mots composites (comme dans google-earth et openxmlformats-officedocument).
  • Un signe plus sert à préciser le format de sérialisation (+json et +xml dans ces exemples).
  • le x- le préfixe doit être utilisé pour les types MIME non enregistrés auprès de l'IANA (et, par conséquent, ne figurant pas dans cette liste).

Sur la base de ces règles, je peux suggérer d'utiliser le type MIME suivant:

application / x-mysite.myobject + json (ou application / x-mysite.parentobject.childobject + json)

Cela semble être la manière la plus précise et la plus correcte de spécifier un type MIME personnalisé pour un objet d'application Web encodé en JSON.


7
2017-07-29 18:25



Mettre à jour: ce bug de Chrome a été corrigé depuis la version 19.

Si je vise à soutenir Google Chrome (la version 12 est la dernière maintenant), alors je dois m'en tenir à text/plain.

C'est parce que Chrome n'a pas correctement implémenté l'objet dataTransfer, et il y a un bug ouvert sur dataTransfer ne fonctionne pas avec non text ou url.

J'ai écrit un simple desmontration chez jsFiddle. Cela fonctionne correctement dans Mozilla Firefox 3.6 et même dans Navigateur Arora (version 0.10.2, WebKit version 533.3). Pour être complet, ma version Chrome est la 12.0.742.112 (version WebKit 534.30). Le code de démonstration est également disponible ci-dessous:

<div id="drag" draggable="true">Drag me!</div>
<div id="drop">Drop here!</div>


#drag, #drop {
    padding: 1em 2em;
    margin: 1em 0;
}
#drag {
    background: #CFC;
}
#drop {
    background: #FCC;
}


function dragstart_handler(ev) {
    console.log('dragstart');
    ev.dataTransfer.setData('text/x-example', 'Foobar');
}

function dragover_handler(ev) {
    // Accepting whatever is dragged over here
    ev.preventDefault();
}

function drop_handler(ev) {
    console.log('drop');
    console.log(ev.dataTransfer.types);

    if (ev.dataTransfer.types) {
        var i;
        for (i = 0; i < ev.dataTransfer.types.length; i++) {
            var type = ev.dataTransfer.types[i];
            console.log(type, ev.dataTransfer.getData(type));
        }
    }

    console.log(ev.dataTransfer.getData('text/x-example'));
}

var drag = document.getElementById('drag');
drag.addEventListener('dragstart', dragstart_handler, false);

var drop = document.getElementById('drop');
drop.addEventListener('dragover', dragover_handler, false);
drop.addEventListener('drop', drop_handler, false);

5
2017-07-22 18:12



Utilisez 'application / json' comme enveloppe pour toutes les autres métadonnées que vous pourriez aimer, y compris le type MIME des fichiers liés ou le HTML que vous voulez utiliser dans le navigateur.

{ 'assets': [
      {
       'color': 'foo',
       'text': 'bar',
       'uri': 'http://', // location of asset
       'type': 'application/zip', // mime-type of asset
       'html': '<div>html representation</div>'
       // .. more properties
      }
   // ...more assets
   ]
}

0
2017-07-20 22:12