4

Firefoxで、デスクトップからコンテンツ編集可能フィールドに画像をドラッグすると、その画像はbase64としてハイライトされたカーソル位置に埋め込まれます。

JSFiddle： http: //jsfiddle.net/zupa/YrwsS/

Chromeでは、画像がブラウザで開かれます（ページロード、同じフィドルで試してください）。

HTML5のおかげで、dropイベントをキャッチし、それを使用して画像をキャッチできます。しかし、ブラウザのデフォルトの動作を停止すると、ユーザーがブラウザをどこにドロップしたいかわからなくなってしまいます。

回避策を提案できますか？

4

1 に答える 1

13

ドロップ位置の座標を取得できる場合（これは可能であると思います）、次のように実行できます（テストされていません）。ビューポートを基準にしたドロップ位置の座標を変数として、ドロップされた画像を変数として持っていると仮定xしyますimg。

デモ： http： //jsfiddle.net/KZqNj/

コード：

var range;

// Try the standards-based way first
if (document.caretPositionFromPoint) {
    var pos = document.caretPositionFromPoint(x, y);
    range = document.createRange();
    range.setStart(pos.offsetNode, pos.offset);
    range.collapse();
    range.insertNode(img);
}
// Next, the WebKit way
else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(x, y);
    range.insertNode(img);
}
// Finally, the IE way
else if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToPoint(x, y);
    var spanId = "temp_" + ("" + Math.random()).slice(2);
    range.pasteHTML('<span id="' + spanId + '">&nbsp;</span>');
    var span = document.getElementById(spanId);
    span.parentNode.replaceChild(img, span);
}

これは最近のWebKit、Opera、Mozillaブラウザで機能しますが、Firefoxにのみ実装されていdocument.caretPositionFromPoint()ます。

参照：

于 2012-05-18T21:29:51.190 に答える