如何获取与放置事件的位置相对应的范围对象？答案

【问题标题】：How to get a range object that correspond to the position of a drop event?如何获取与放置事件的位置相对应的范围对象？
【发布时间】：2011-10-03 15:50:34
【问题描述】：

我想将图像拖放到 aloha 可编辑字段中。

我正在查看看起来很棒的 at.tapo.aloha.plugins.Image 插件。

但是，我需要调整这个插件才能使用缩略图。我拖动缩略图，当我将它放到 aloha 可编辑文件中时，会动态修改 html 代码以使用真实图像。

    GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'editableCreated', function(event, editable) {
        var the_obj = editable.obj;
        jQuery(editable.obj).bind('drop', function(event){
            var e = event.originalEvent;
            var files = e.dataTransfer.files;
            var count = files.length;

            if (count < 1) {
                var node = e.dataTransfer.mozSourceNode;
                if (node.tagName === 'IMG') {
                    var html = '<img ....>'; //build the real image html code  
                    /// The current selection but I want the drop position
                    var range = GENTICS.Aloha.Selection.getRangeObject();
                    if (!jQuery.isEmptyObject(range)) {
                        GENTICS.Utils.Dom.insertIntoDOM(jQuery(html), range, the_obj);
                    }
                    return false;
                }
                return true;
            }
    }

在 aloha 字段中选择某些内容时可以正常工作。我可以获取一个范围并将 html 插入到选择位置的 DOM 中。

但是，我想获得一个与我的图像被丢弃的位置相对应的范围对象。该怎么做？

提前感谢您的想法。

【问题讨论】：

标签： javascript jquery drag-and-drop aloha-editor

【解决方案1】：

据我所知，一般来说没有一种简单的方法可以做到这一点。您可以获取放置点的像素坐标（可能来自mousemove 事件），然后尝试获取该点的范围。对于该任务，以下问题的答案很好地总结了它：

Creating a collapsed range from a pixel position in FF/Webkit

【讨论】：

谢谢！我同意似乎没有简单的方法。我终于使用了一种解决方法。看我的回答

【解决方案2】：

Tim Down 告诉我没有简单的方法，我终于使用了一种解决方法：

GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'editableCreated', function(event, editable) {
    var the_obj = editable.obj;
    jQuery(editable.obj).bind('drop', function(event){
        setTimeout(function () {
            //at this point the html is updated and can be postprocessed 
            //in order to turn thumbnails into the real image

            //force the focus in order to make sure that the editable is activated
            //this will cause the deactivated event to be triggered, and the content to be saved
            the_obj.focus(); 
        }, 0);
    });
});

【讨论】：