UXP

ブラウザ、ネイティブアプリケーションでは当たり前の使われているDrag-and-DropですがUXPではイマイチサポートされていなかったり不明確だったりしたのです今回UXP9.2.0の更新ログが更新されたので調べてみました。まず今回のテスト環境は以下になります。

• Photoshop 2026(27.4.0)
• UXP 9.2.0
• MacOS

Drag-and-Dropの基本

実装するにあたりDragとDrop以外にも複数のイベントがありそれぞれ適切にイベントを設定しないと要素のドラッグもしくはドロップがうまく動かない可能性があります。詳しくはMDNのページでも参考にしてください。またHTMLには必ずドラッグする要素に以下の要素を加えてください。
draggable="true"

パネル上の要素をドラッグする

これに関してはブラウザと挙動がほとんど同じで以下の通り実装すれば問題無く動きます。

PanelとWebviewの受け渡し

UXPの更新ログにてUXP9.1.0からWebview内の要素も外からのドラッグ要素を受け取れるようになったと書いてあったので以下実装して確認しました。

• WebviewにDropイベントを設定
• UXPのPanel側の要素にDragイベントを設定してWebview内にDropできるようにする

これでUXP本体とWebview内のやりとりが広がるとか。

ローカルファイルの受け取り

やはりローカルで動くアプリケーションのプラグイン開発ときてこれに興味のある方が多いのではないでしょうか。昔はできなかったはずですし公式にもできるようになったみたいな話を聞いた覚えもないのですがとにかくPhotoshopに関してはサポートしているみたいです。ただしWebの環境とは少し勝手が異なります。

イベントの実装自体は変わらないのですが問題はファイルを受け取った後になります。
通常クライアントサイドはそのままデータを受け取れないのですがUXPはローカル上で動くことが前提のシステムなのでこのままローカルファイルパスを受け取ることができます。

nativePathのプロパティ内でしっかりファイルパスを受け取っています。
ただしWebview内はクライアントサイドとなり基本はブラウザと同じ仕様になるのでWebview内でローカルファイルを受け取る場合は注意してください。

尚2026年3月時点ではPremiere、InDesignでテストしたところDrag-and-Dropは対応していないようです。

参考
drag-and-drop-uxp