Drag and drop an external div

I have spend a lot of time to drag an external div and drop it inside the CkEditor accordingly to the mouse position. It seems that a few people are trying to design such a functionality so I've decided to present how I eventually manage this. I hope this will be helpful.

The DOM is like that :

<div class="sdpParam showContent ui-droppable" name="1099" rail="111">
<div class="sdpActions"> ... </div>
<div id="editor-1099" class="editContent"> ... </div>
<span id="cke_editor-1099" class="cke_skin_kama cke_1 cke_editor_editor-1099" lang="fr" aria-labelledby="cke_editor-1099_arialbl" role="application" title=" " dir="ltr">...</span>
</div>

at init I do :

     sdpParam.droppable({
            accept: '.sdpIcone',
            over: function( event, ui ) {
                ui['helper'][0]['sdpParam'] = this;
            },
            out: function( event, ui ) {
                delete ui['helper'][0]['sdpParam'];
            },
            drop: function( event, ui ) {   
                sdpFakeDrag(sdpParam,event,ui);
                //insert it now (I build an image from the dragged item)
            }
        });

and for the draggable item :

  
icones.draggable({
                connectToSortable: 'ul.sdpDock, ul.sdpRail, div.sdpParam',
                helper: 'clone',
                zIndex: '10',
                appendTo: '#main',
                iframeFix: true,
                start : function(event, ui) { ... }
                },
                drag : function(event, ui) {
                   if(ui['helper'][0]['sdpParam']) sdpFakeDrag(ui['helper'][0]['sdpParam'],event,ui);
                },
                stop : function(event, ui) { ... }
}

And now the sdpFakeDrag function :

    sdpFakeDrag = function(sdpParam,event,ui) {                
        var editor = CKEDITOR.instances['editor-'+$(sdpParam).attr('name')];
        var target = $(sdpParam).find('iframe')[0].contentDocument.elementFromPoint(event.layerX,event.layerY);                
        var range = new CKEDITOR.dom.range(editor.document);
//        if(target.is('p')) {
//         It would be amazing to move the caret according to the mouse position 
//         but I don't know how to efficiently do it.          
//        } else 
            range.setStart(new CKEDITOR.dom.node(target), 0);
        range.collapse();
        editor.getSelection().selectRanges( [ range ] );        
        editor.focus();
    }

I think that it is possible to move the caret inside a paragraph but I don't need such a feature. However I would do it like that (but I don't know if it would be efficient enough) :
First I would guess the line height using $(target).css('line-height');
Then $(target).height() enable me to find the line where the caret must be.
At last I would start an optimized binary search by inserting a small image and testing its position.
If you improve my proposal, thanks to present your enhanced code.