webentwicklung-frage-antwort-db.com.de

HTML5-Drag-and-Drop zwischen Fenstern

gibt es sowieso die HTML5 Drag & Drop-Funktion oder/und die File API, um ein JPG-Bild von einem Fenster in ein anderes zu ziehen?

Die Idee ist, dass ich mit einem benutzerdefinierten HTML-Code, der dieses Bild abruft, von Facebook in ein anderes Browserfenster gezogen und Bilder dort ziehen könnte.

Oder zumindest eine Möglichkeit, vom Desktop in einen Browser zu ziehen?

Danke vielmals

28
jordi

Nicht sicher zwischen Fenstern, aber sicher vom Desktop:

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

Schauen Sie sich auf der vollständigen html5rocks.com - Site nach Ideen um.


BEARBEITEN:

Ich habe gerade diese Demo in zwei separaten Browserfenstern geöffnet, und ich kann von einem Fenster zum anderen ziehen. Ich konnte auch ein Miniaturbild von Facebook in eine Drop-Zone ziehen.

Das Facebook-Image wurde jedoch als "unbekannt" abgelegt. Es sieht also so aus, als könnten Sie von einer Website zur anderen wechseln, aber ich bin mir nicht sicher, was genau wirklich fallen gelassen wird. Wenn Sie von Facebook oder ähnlichem ziehen, muss Facebook möglicherweise für die Bilder oder Elemente die Eigenschaftsvariable draggable oder etwas anderes haben, das Ihre Anwendung lesen kann.

Das Fazit ist, dass Sie in der Lage sein sollten, zwischen Anwendungen zu arbeiten, über die Sie die Kontrolle haben. Wenn Sie jedoch versuchen, das Programm in externe Apps zu integrieren, müssen Sie ein wenig experimentieren, um herauszufinden, was beim Ziehen/Ablegen genau übergeben wird. Ich habe diese Arbeit nicht selbst gemacht, aber es sollte nicht schwer sein.

16
Tauren

Dies ist eine alte, aber da ich mich kürzlich damit auseinandersetzte und da mehr dahinter steckt, als Sie vielleicht denken, füge ich eine Antwort hinzu. Als Einführung in die systemeigenen Methoden erfahren Sie unter this site .

Das wird dich so weit bringen. Beim Ziehen zwischen Fenstern riecht es. Das Problem ist, dass es wieder keine große Konsistenz zwischen den Browsern gibt. Öffnen Sie eine Reihe verschiedener Browser und öffnen Sie dann dieses ausgezeichnete Beispiel . Aktivieren Sie das erste Optionsfeld getData('Text') und testen Sie das Ziehen und Ablegen von Bildern. Als erstes werden Sie feststellen, dass getData ('Text') in einigen Fällen eine URL enthält, nicht aber die Bild-URL. Wählen Sie nun das Optionsfeld getData(e.dataTransfer.types[0]) based on detected content type. Je nachdem, welchen Browser Sie wählen, werden Sie feststellen, dass einige Typen die URL enthalten, in der das Bild angezeigt wird. Jeder Browser hat jedoch unterschiedliche Typen. Zum Zeitpunkt des Schreibens haben einige Browser (Internet Explorer) keine Typen, die über die Image-URL verfügen. Wenn Sie also Google-Bilder in Internet Explorer öffnen und die funky Drag-Drop-Bildersuche ausführen, geschieht nichts - es erscheint kein Drop-Drop-Fenster. 

Also, das Beste, was ich mir ausgedacht habe, ist (vergewissern Sie sich, dass Sie auf die oben genannten Links verweisen, sonst wissen Sie nicht, worum es mir geht):

  1. Überprüfen Sie e.dataTransfer.files. Wenn es Dateien gibt, ist alles gut. Dies ist höchstwahrscheinlich ein Abwurf vom lokalen Computer. Wenn nicht, fahren Sie mit Schritt 2 fort.
  2. Durchlaufen Sie getData(e.dataTransfer.types[0]) und übergeben Sie die URL an einen regulären Ausdruck, der nach einer Zeichenfolge sucht, die die Image-URL enthält. So etwas wie: 

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

    Wenn Sie eine Übereinstimmung finden, dann ist alles gut. Machen Sie, was immer Sie möchten, zum Beispiel, um das Image abzurufen. Wenn nicht, fahren Sie mit Schritt 3 fort.

  3. Versuchen Sie es mit getData('Text'). Wenn Sie eine Übereinstimmung finden, dann gut. Weiter zum Server usw. Fahren Sie andernfalls mit Schritt 4 fort.
  4. Du hast kein Glück. Zeigen Sie dem Benutzer eine nicht unterstützte Nachricht und bitten Sie ihn, das Bild auf andere Weise bereitzustellen. 
6
acarlon

Wenn Sie jQuery verwenden, können Sie Folgendes anzeigen: https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-page

Auf der About-Seite:
Es funktioniert, indem eine JSONP-Anfrage mit der URL des Bildes über die Google App Engine1 an die Server von Google gesendet wird. Der Server konvertiert das Bild in eine Base64-codierte Daten-URL und sendet das Bild als JSON-Objekt zurück. Dies bedeutet, dass das Bild lokal auf der Website enthalten sein kann und daher mit dem Canvas-Tag bearbeitet werden kann.

Ich habe es noch nicht ausprobiert, werde es aber bald sehen!

4
Demelziraptor

* Holen der URL aus dem gezogenen Bild, 100% ok für Firefox und Chrom *

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

Ich weiß, dass Sie sehr leicht die URL des Bildes erhalten können, das gezogen wurde: MyDataTransfer.getData ("Text")

bislang konnte ich jedoch keine Möglichkeit finden, die zugrunde liegenden Bilddaten abzurufen, ohne die Javascript-Sicherheit in anderen Domains zu beeinträchtigen. Sie können das Bild nicht mit Ajax abrufen und auch keine Leinwand verwenden entweder ein Vermittler.

Leider scheint das Ziehen selbst (dh das dataTransfer-Objekt) in den meisten Fällen die Bilddaten nicht zu enthalten. Ich sage "die meisten Fälle", weil das Ziehen aus demselben Browser nicht erfolgt, aber wenn ich aus einem Firefox-Fenster in ein Chrome-Fenster gezogen habe, scheint es eine Art Bitmap-Bild enthalten zu haben, aber es hat ein ungewöhnliches Format (vielleicht ein Windows Sache).

Die einzige andere Sache, die Sie sich ansehen sollten, ist die browserspezifische Funktionalität wie "application/x-moz-nativeimage". Ich sehe jedoch keine ähnliche Eigenschaft, die an das dataTransfer-Objekt in Chrome angehängt ist.

1
dlo

Hier ist ein Beispiel für das Ziehen und Ablegen von Dateien mit HTML5. Dies scheint nicht von einem Browserfenster zum anderen zu funktionieren (Desktop-> Browser funktioniert). Sie können dies aber als Referenz verwenden.

dies ist ein Experiment, bei dem die Web-ID zum Erstellen eines HTML5-Formulars verwendet wird.

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

0
dkris

In Chrome können Sie Kopieren/Einfügen verwenden. Sie müssen das Bild kopieren, indem Sie mit der rechten Maustaste darauf klicken und "Bild kopieren" wählen. Dann können Sie es in eine andere Seite einfügen, die Einfügeereignisse mit Strg + V verarbeitet.

Hier ist eine Demo, die das Prinzip veranschaulicht: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

0
Daniel X Moore