title: How to locate cursor index when handling drop event?
body: <p>For some reason myTextArea.selectionStart works perfectly fine when I handle a pasteEvent, but when I handle a drop event it is wrong. How can I get the target cursor position of a drop event into a text area? For example, I would like to know if the user is drag/dropping some text at the beginning of the textarea's content or the end. Let's assume the text area's value can't be changed (like in the example). I've used jQuery in my example as a convenience; it isn't part of the question.</p>
  
  <p>Edit: may not have been clear. If you run the code snippet and (before focusing on the text area), drag-drop text to the end of the text area, it reports the drop position as 0 instead of expected 18.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#x').on('drop', function(event){
     $('#y').html(event.target.selectionStart);
     return false;
   });
  
  $('#x').on('paste', function(event){
     $('#z').html(event.target.selectionStart);
     return false;
   });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;Try drag/dropping this text before and after existing text, then try with copy/paste&lt;/div&gt;
  &lt;textarea id="x"&gt;some existing text&lt;/textarea&gt;
  &lt;div&gt;The drop position was &lt;span id="y"&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div&gt;The paste position was &lt;span id="z"&gt;&lt;/span&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>