1

JavaScript を使用した JSP を含む Maven Jetty プロジェクトがあります。ドラッグした画像のサイズに対応するキャンバスの部分を強調表示できるようにしたい。

JSP をブラウザで開くだけですべてが期待どおりに動作しますが、目標 jetty:run で Jetty サーバーを起動すると、ドラッグされたオブジェクトの ID が設定されていないか、イベントの transferData から取得できません。 .

関連するコード: ドラッグ可能なすべての画像には一意の ID があります。ドラッグ開始時に、ドラッグされた画像の ID をイベントの transferData に次のように設定します。

function dragShipFromTable(event) {
    event.dataTransfer.setData("id",event.target.id);
}

画像がキャンバス上にドラッグされると、次の関数を呼び出します

function allowDrop(event) {
    event.preventDefault();
    var id = event.dataTransfer.getData("id");
    var img = document.getElementById(id);
    // Do the highlighting stuff
    ....
}

問題は、サーバーが起動して上記のアクションを実行すると、allowDrop(event) でドラッグされた画像の ID が transferData から取得されないことです。定義されていないため、強調表示は失敗します。これは、単に JSP をファイルとして開く場合には当てはまりません。

4

1 に答える 1

2

さて、私は自分の質問に対する答えを見つけました。まず、dataTransfer オブジェクトの setData メソッドは、最初のパラメーターとして特定の形式のみを許可します。連想配列と解釈しましたが、そうではありません。だからそうあるべきだ

event.dataTransfer.setData("text/plain", id);
event.dataTransfer.getData("text/plain");

IDを正しく設定および取得するには。

しかし、Chrome にはバグがあり、dataTransfer を意図したとおりに使用できないため、Chrome が原因ですべてが失敗しました ( Chrome でドラッグスタート イベントから選択したアイテムを取得するにはどうすればよいですか? Is dataTransfer.getData は壊れていますか? を参照)。

現在、必要な情報を格納するためにグローバル変数を使用しています。それでも、ページが Web サーバーからの応答としてではなくファイルとして表示されたときに、なぜすべてが正常に機能したのか疑問に思っています。

于 2012-05-18T20:20:44.240 に答える