text: Q:
  
  How to locate cursor index when handling drop event?
  
  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.
  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.
  
  $('#x').on('drop', function(event){
     $('#y').html(event.target.selectionStart);
     return false;
   });
  
  $('#x').on('paste', function(event){
     $('#z').html(event.target.selectionStart);
     return false;
   });
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div>Try drag/dropping this text before and after existing text, then try with copy/paste</div>
  <textarea id="x">some existing text</textarea>
  <div>The drop position was <span id="y"></span></div>
  <div>The paste position was <span id="z"></span></div>
  
  A:
  
  I had a little idea this night, how to hack your problem. My current solution is here:
  You are cancelling the drop and paste event, but I let them happen. Afterwards I calculate the difference of the old string and the new string and with this, you can get the position of change :)
  Works for your case.
  
  let drop_event = 'drop';
  let paste_event = 'paste';
  let events = [drop_event, paste_event];
  var old_val = $('#x').val();
  var current_event = '';
  var cursor_pos = 0;
  var sel_len = 0;
  
  // iterate through each event
  $.each( events, function( key, value ) {
    $('#x').on(value, function(event){
      // saving old value and the current event
      old_value = $('#x').val();
      current_event = value;
    });
  });
  
  
  $('#x').on('input', function(event){
    // position, where the string change starts
    cursor_pos = event.target.selectionStart;
    if (current_event == drop_event){
      // drop events are eays
      $('#y').html(cursor_pos);
    } else {
      // substract the length of change
      $('#z').html(cursor_pos - diff_string($('#x').val(), old_val));
    }
    // set old string value
    $('#x').val(old_val);
  });
  
  /*
   * Calculates the difference between two strings,
   * iff one string is substring of the other string
   * @param a first string
   * @param b second string
   * @return differnce as int
   */
  function diff_string(a, b){
    var len = a.length > b.length ? b.length : a.length;
    var index = 0;
    while (a.charAt(index) == b.charAt(index))
      index += 1;
    a = a.substr(index);
    b = b.substr(index);
    var diff = a.length > b.length ? a.indexOf(b) : b.indexOf(a);
    diff = diff == 0 ? a.length + b.length : diff;
    return diff;
  }
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div>Try drag/dropping this text before and after existing text, then try with copy/paste</div>
  <textarea id="x">123456789 some existing text</textarea>
  <div>The drop position was <span id="y"></span></div>
  <div>The paste position was <span id="z"></span></div>
  
  