Jquery UI drop event plain/text between text in Div contentEditable

I'm sorry for my bad English but I try to make the question understandable.

In the snippet (Or the jsfiddle) We can find two draggable items:

1. foo (If you drag it and drop in the Div content editable the [% foo %] text appear where we drop it between the text)
2. foo2 (This have the Jquery UI drag style (it follows the cursor))

I want to achieve the functionalitty of foo With jquery UI style. But when I try : event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]"); It looks like event is not define if I try to define the function like this:

drag: function(ui, event) 

The motion of the foo2 Stop work (It mean is a error in the code)

Here is the snippet:

//$( "#foo2" ).draggable();
$( "#foo2" ).draggable({
      start: function(ui) {

      event.preventDefault();
      },
      drag: function(ui) {

      },
      stop: function(ui) {

      }
    });


var btn = document.getElementById("foo");
btn.onclick = function(event) {
  event.preventDefault();
};

btn.ondragstart = function(event) {
  event.dataTransfer.setData("text/plain", "[%" + event.srcElement.innerHTML + "%]");
};

<span draggable="true" id="foo" class="btn btn-primary">Foo</span>
<div style="background:red" contenteditable="true" >Put foo between this and this</div>
<a  id="foo2" class="btn btn-primary">Foo2</a>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

The same demo: http://jsfiddle.net/fbprfj5c/1/

Thanks for all your help, recommendations or tips :)

Update:

In response to Gaetano: I like your idea, and is my fault for no tell all the details. You get the main idea but the tricky way of get the the Width of character and calculate the position with that i can do a similar function to achieve the same effect with a more larger div (in the y axis). But in the div can be more elements than characters. I"ll start with your idea, But i think is a shame open another question for this. In another hand you resolve the problem But that "hacky"/simulation to get the caret position i try to improve (I try before without achieve it), So let"s wait a little is someone have an idea