Перетащите изображение в contenteditable в Chrome до курсора

Question

В Firefox, если я перетащу изображение в contenteditable поле с рабочего стола, оно будет встроено как base64 в положение курсора HIGHLIGHTED.

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

Теперь в Chrome изображение открывается браузером (загрузка страницы, попробуйте в той же скрипке).

Благодаря HTML5 вы можете поймать событие drop и поймать изображение вместе с ним. Но если я остановлю поведение браузера по умолчанию, я застряну, не зная, куда пользователь хочет его удалить.

Можете ли вы предложить обходной путь?

Answer 1

Если вы можете получить координаты места падения (что, я полагаю, должно быть возможно), вы можете сделать это следующим образом (не проверено). Я предполагаю, что у вас есть координаты местоположения отбрасывания относительно области просмотра в качестве переменных 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(),

Рекомендации:

• http://dev.w3.org/csswg/cssom-view/