web-dev-qa-db-fra.com

HTML5 glisser-déposer entre les fenêtres

existe-t-il malgré tout avec la fonctionnalité HTML5 glisser-déposer ou/et l'API de fichier pour faire glisser une image jpg d'une fenêtre à une autre?

L'idée est que je pourrais faire glisser l'image de Facebook vers une autre fenêtre du navigateur avec un code HTML personnalisé qui obtiendrait cette image.

Ou, au moins, un moyen de faire glisser du bureau vers un navigateur?

Merci beaucoup

windowsimagehtml5drag-and-dropdesktop
28
jordi

Pas sûr entre les fenêtres, mais certainement du bureau:

http://studio.html5rocks.com/#Photos

En fait, consultez le site complet -html5rocks.com pour des idées.

MODIFIER:

Je viens d’ouvrir cette démo dans deux fenêtres de navigateur distinctes, et je peux faire glisser d’une fenêtre à l’autre. J'ai également pu faire glisser une vignette de Facebook et la déposer dans une zone de dépôt.

Cependant, l'image de Facebook a été supprimée comme "inconnue". Il semble donc que vous puissiez passer d’un site à l’autre, mais je ne suis pas sûr de ce qui sera réellement supprimé. Si vous faites un glisser-déposer depuis Facebook ou autre, Facebook peut avoir besoin que les images ou les éléments possèdent la propriété draggable ou quelque chose d'autre que votre application peut lire.

En bout de ligne, vous devriez pouvoir le faire fonctionner entre les applications sur lesquelles vous avez le contrôle. Mais si vous essayez de l'intégrer à des applications externes, vous devrez faire quelques essais pour déterminer ce qui est exactement transmis lors du glisser-déposer. Je n'ai pas fait ce travail moi-même, mais ça ne devrait pas être difficile.

16
Tauren

C’est un vieux problème, mais depuis que j’ai récemment abordé cette question et que cela ne se résume pas à ce que vous pourriez penser, j’y ai mis une réponse. Pour vous familiariser avec les méthodes natives, reportez-vous à ce site .

Cela vous mènera si loin. Quand il s'agit de glisser entre les fenêtres, ça sent mauvais. Le problème est qu’une fois encore, il n’ya pas beaucoup de cohérence entre les navigateurs. Ouvrez plusieurs navigateurs, puis ouvrez cet excellent exemple . Sélectionnez le premier bouton radio getData('Text') et testez le glisser-déposer des images. La première chose que vous remarquerez est que, dans certains cas, getData ('Text') contient une URL, mais pas l’URL de l’image. Alors, choisissez maintenant le bouton radio getData(e.dataTransfer.types[0]) based on detected content type. Vous remarquerez, en fonction du navigateur que vous choisissez, que certains types contiennent l'URL de l'image qui apparaît, mais que chaque navigateur possède des types différents. Au moment de la rédaction de ce document, certains navigateurs (Internet Explorer) n’ont aucun type comportant l’URL de l’image. C'est pourquoi, si vous ouvrez des images Google dans Internet Explorer et tentez cette recherche d'images géniale par glisser-déposer, rien ne se passe - aucune boîte de dialogue "déposer ici" ne s'affiche. 

Donc, le mieux que je trouve est (assurez-vous de vous référer à ces liens ci-dessus sinon vous ne saurez pas ce que je vais sur): -

  1. Vérifiez e.dataTransfer.files. S'il y a des fichiers alors tout va bien. Il s’agit très probablement d’une chute de l’ordinateur local. Sinon, passez à l'étape 2.

  2. Parcourez getData(e.dataTransfer.types[0]) et transmettez l'URL à un regex qui recherche une chaîne contenant l'URL de l'image. Quelque chose comme: 

    RegExp( 'http://(.(?!http://))+?(?:[.]jpg|[.]jpeg|[.]png|[.]gif|[.]tiff|[.]ico)', 'gmi' )

    Si vous trouvez une correspondance alors tout va bien. Faites ce que vous voulez, comme passer au serveur pour récupérer une image. Sinon, passez à l'étape 3.

  3. Essayez getData('Text'). Si vous trouvez un match alors bon. Passez au serveur, etc. Sinon, passez à l’étape 4.
  4. Tu n'as pas de chance. Affichez l'utilisateur avec un message non pris en charge et demandez-lui de fournir l'image d'une autre manière. 
6
acarlon

Si vous utilisez jQuery, vous pouvez jeter un coup d’œil à ceci: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

Sur la page à propos:
Cela fonctionne en envoyant une requête JSONP avec l'URL de l'image aux serveurs de Google via Google App Engine1. Le serveur convertit ensuite l'image en URL de données codée en base64 et renvoie l'image sous forme d'objet JSON. Cela signifie que l'image peut être incluse localement sur le site Web et qu'elle peut donc être modifiée par la balise canvas.

Je ne l'ai pas encore essayé, mais j'y jetterai un coup d'oeil bientôt!

4
Demelziraptor

* Obtenir l'URL de l'image traînée, 100% ok pour Firefox et Chrome *

$('#element').bind('drop', function (e) {
    alert($($.trim($(e.originalEvent.dataTransfer.getData('text/html')).html())).attr('src'));
});
3
Francis Fussiger

Je sais que vous pouvez très facilement obtenir l'URL de l'image déplacée: MyDataTransfer.getData ("Text")

mais jusqu'à présent, je n'ai pas réussi à trouver un moyen de récupérer les données d'image sous-jacentes sans tomber sous le coup de la sécurité javascript entre domaines ... vous ne pouvez pas récupérer l'image en utilisant ajax, et vous ne pouvez pas utiliser de zone de dessin. un intermédiaire non plus.

Malheureusement, il semble que dans la plupart des cas, le glissement lui-même (c'est-à-dire l'objet dataTransfer) ne contienne pas les données de l'image. Je dis «la plupart des cas», car ce n'est pas le cas dans le même navigateur, mais lorsque je glissais d'une fenêtre Firefox vers une fenêtre Chrome, il semblait y avoir une sorte d'image bitmap, mais son format était inhabituel (peut-être un Windows chose).

La seule autre chose à examiner concerne les fonctionnalités spécifiques au navigateur, telles que "application/x-moz-nativeimage", mais je ne vois aucune propriété similaire associée à l'objet dataTransfer dans Chrome.

1
dlo

Voici un exemple de glisser-déposer de fichier à l'aide de HTML5. Cela ne semble pas fonctionner d'une fenêtre de navigateur à une autre (Desktop-> browser fonctionne). Mais vous pouvez utiliser cela comme référence.

il s’agit d’une expérience utilisant l’identification Web pour créer un formulaire HTML5.

http://www.mattiasdanielsson.se/2010/building-innovative-login-html5-filereader/

0
dkris

Dans Chrome, vous pouvez utiliser Copier/Coller, vous devez copier l'image en cliquant dessus avec le bouton droit de la souris et en choisissant "Copier l'image". Vous pouvez ensuite la coller dans une autre page qui gère les événements de collage avec Ctrl + V.

Voici une démo illustrant le principe: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

0
Daniel X Moore