将图片投放到Chrome中的游标中

Question

在Firefox中,如果我将图像从桌面拖到一个可信的字段中,它将作为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/#dom-document-caretpositionfrompoint