web-dev-qa-db-ja.com

ウィンドウ間のHTML5ドラッグアンドドロップ

とにかく、HTML5のドラッグアンドドロップ機能やファイルAPIを使用して、jpg画像をあるウィンドウから別のウィンドウにドラッグすることはできますか？

アイデアは、Facebookから別のブラウザのウィンドウにその画像を取得するカスタムHTMLを使用してドラッグして画像を作成できるということです。

または、少なくとも、デスクトップからブラウザにドラッグする方法は？

どうもありがとう

windowsimagehtmldrag-and-dropdesktop
29
jordi

ウィンドウ間についてはわかりませんが、デスクトップからは確かです。

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

実際、アイデアについては、完全な html5rocks.com サイトをチェックしてください。

編集：

2つのブラウザーウィンドウで このデモ を開いたところ、あるウィンドウから別のウィンドウにドラッグできます。 Facebookからサムネイルをドラッグしてドロップゾーンにドロップすることもできました。

ただし、Facebookの画像は「不明」として削除されました。つまり、あるサイトから別のサイトにドロップできるように見えますが、実際に何がドロップされるのかはわかりません。 Facebookなどからドラッグしている場合、Facebookでは、画像または要素にdraggableプロパティを設定するか、アプリケーションが読み取れるその他のものを設定する必要があります。

要するに、自分が制御できるアプリケーション間でそれを機能させることができるはずです。しかし、それを外部アプリと統合しようとしている場合、ドラッグ/ドロップ中に正確に渡されるものを見つけるために、いくつかの実験を行う必要があります。私はこの仕事を自分でやったことはありませんが、難しいことではありません。

16
Tauren

これは古いものですが、最近それに悩んでいて、思った以上に多くのことがあるので、答えを入れました。ネイティブメソッドの概要については、 this site を参照してください。

それはあなたをこれまでに得るでしょう。ウィンドウ間のドラッグに関しては、物事が臭くなります。問題は、繰り返しになりますが、ブラウザ間の一貫性があまりないことです。さまざまなブラウザを開いてから この優れた例を開いてください 。最初のgetData('Text')ラジオボタンを選択し、画像のドラッグアンドドロップをテストします。最初に気付くのは、場合によってはgetData（ 'Text'）にURLが含まれているが、画像のURLは含まれていないことです。したがって、ここでgetData(e.dataTransfer.types[0]) based on detected content typeラジオボタンを選択します。選択したブラウザに応じて、一部のタイプには画像へのURLが含まれていることがわかりますが、ブラウザごとにタイプが異なります。これを書いている時点では、一部のブラウザー（Internet Explorer）には、イメージのURLを持つタイプがありません。これが、Internet ExplorerでGoogle画像を開いて、そのファンキーなドラッグアンドドロップ画像検索を試しても何も起こらない理由です。「ここにドロップ」ボックスは表示されません。

だから、私が思いついた最高のものです（上のリンクを参照してください。そうしないと、私が何をしているのかわからなくなります）：-

  1. _e.dataTransfer.files_を確認してください。ファイルがある場合は、すべて問題ありません。これはおそらくローカルコンピュータからのドロップです。そうでない場合は、ステップ2に進みます。

  2. getData(e.dataTransfer.types[0])をループして、画像のURLを含む文字列をチェックする正規表現にURLを渡します。何かのようなもの：

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

    一致するものが見つかったら、すべて問題ありません。サーバーに渡して画像を取得するなど、必要な操作を行います。そうでない場合は、手順3に進みます。

  3. getData('Text')を試してください。あなたが一致を見つけた場合は良い。サーバーなどに渡します。そうでない場合は、手順4に進みます。
  4. あなたは運が悪い。サポートされていないメッセージをユーザーに表示し、別の方法で画像を提供するように依頼します。
6
acarlon

JQueryを使用している場合は、これを見ることができます： https://github.com/blueimp/jQuery-File-Upload/wiki/Drag-and-drop-uploads-from-another-web-ページ

概要ページで：
画像のURLを含むJSONPリクエストをGoogleAppEngine1経由でGoogleのサーバーに送信することで機能します。次に、サーバーは画像をbase64でエンコードされたデータURLに変換し、画像をJSONオブジェクトとして送り返します。これは、画像をWebサイトにローカルに含めることができるため、canvasタグで編集できることを意味します。

まだ試していませんが、もうすぐ見ていきます！

4
Demelziraptor

*ドラッグされた画像からURLを取得し、Firefoxに100％OK、chrome *

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

ドラッグされた画像のURLを非常に簡単に取得できることを知っています：myDataTransfer.getData（ "Text"）

しかし、これまでのところ、クロスドメインJavaScriptセキュリティに反することなく、基になる画像データを取得する方法を見つけることができませんでした... ajaxを使用して画像をフェッチすることはできず、キャンバスを次のように使用することもできません。仲介者のどちらか。

残念ながら、ほとんどの場合、ドラッグ自体（つまり、dataTransferオブジェクト）には画像データが含まれていないようです。同じブラウザ内からのドラッグはそうではないので、「ほとんどの場合」と言いますが、FirefoxウィンドウからChromeウィンドウにドラッグすると、ある種のビットマップイメージが含まれているようです。しかし、それはいくつかの異常な形式です（おそらくWindowsのものです）。

他に確認する必要があるのは、「application/x-moz-nativeimage」などのブラウザ固有の機能だけですが、ChromeのdataTransferオブジェクトに接続されている同様のプロパティがありません。

1
dlo

HTML5を使用したファイルのドラッグアンドドロップの例を次に示します。これは、あるブラウザウィンドウから別のブラウザウィンドウでは機能しないようです（デスクトップ->ブラウザは機能します）。ただし、これを参照として使用できます。

これは、WebIDを使用してHTML5フォームを作成する実験です。

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

0
dkris

Chromeコピー/貼り付けを使用できます。右クリックして[画像のコピー]を選択し、画像をコピーする必要があります。次に、貼り付けイベントを処理する別のページに貼り付けることができます。 Ctrl + V。

これは原理を示すデモです： http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/

0
Daniel X Moore