드롭 이벤트의 위치에 해당하는 범위 개체를 가져 오는 방법은 무엇입니까?

Question

이미지를 알로하 편집 가능 필드에 끌어서 놓으 려합니다.

나는 위대해 보이는 at.tapo.aloha.plugins.Image 플러그인을보고 있습니다.

그러나 미리보기 이미지를 사용하려면이 플러그인을 조정해야합니다. 미리보기 이미지를 드래그하여 알로하 편집 가능으로 놓으면 실제 이미지를 사용하기 위해 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; 
      } 
    } 

알로하 필드에서 항목을 선택하면 문제가 없습니다. 난 범위를 얻을 수 있으며 선택 위치에서 DOM에 html을 삽입 할 수 있습니다.

그러나 이미지를 놓은 위치에 해당하는 범위 객체를 얻고 싶습니다. 그렇게하는 방법?

미리 감사드립니다.

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