如何獲取與放置事件的位置相對應的範圍對象？

Question

我想將圖像拖放到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中。

但是，我想獲得一個範圍對象，對應於我的圖像被放置的地方。怎麼做？

在此先感謝您的意見。

Answer 1

有一種簡單的方法，我知道這樣做一般。您可以獲取下降點的像素座標（可能來自mousemove事件），然後嘗試獲取該點的範圍。對於這項任務，回答以下問題概括起來很好：

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

Answer 2

添下給我看，有沒有簡單的方法，我終於用一種變通方法：

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); 
    }); 
});