2

I've spent some time searching SO for mapping mouse coordinates to text offset (for drag and drop), but the only solution I've come across is to wrap each character in its own span so that you may monitor mouse events on that span, which is not a scalable solution (for large documents).

But moreover, Google Docs is able to track the mouse cursor as it drags text around (drawing an insertion point in the text where the mouse is). From monitoring the DOM at and around the text, it doesn't appear to be using the character-span technique. Does anyone know how this is accomplished?

Yang
  • 16,037
  • 15
  • 100
  • 142

1 Answers1

0

Unfortunately I don't have a Google account so I can't check what Google uses to accomplish Google Docs. But for obtaining the selection source you could be interested in this answer.

You also mentioned drag and drop. HTML5 supports an attribute called "contenteditable". The browser makes it (like the name implies) editable for the user. Here is a nice example.

To see how an editor (for example CKEditor or maybe even Google Docs) can be written with HTML 5 techniques, read http://www.quackit.com/html/codes/contenteditable.cfm.

Community
  • 1
  • 1
user1678062
  • 573
  • 5
  • 16
  • I do know about contenteditable and ranges/selections (have written my own HTML editor), but these aren't really relevant to the question. – Yang Sep 24 '12 at 13:08