CODEWITHSUNDEEP
javascriptinputdrag-and-droponmouseover
RobertPorter
RobertPorter

Reputation: 552

Input cursor position mouseover in javascript

I have a textbox with some text entered. Furthermore I have a draggable div that I can drag and drop on my textbox. Contents of this div insert into the textbox (appended to the end) as text when dropped.

Now i would like to be able to manipulate the cursor within the textbox so that it follows mouse position and the text is inserted exactly where it was dropped.

I already have mouse x and y , I know how to manipualte caret but I dont know how to combine these two...

Thanks in advance for any advise

Upvotes: 1

Views: 1945

Answers (1)

RobertPorter
RobertPorter

Reputation: 552

Since only img and a tags had drag and drop properly working I decided to use them. And by properly working I mean that when the item (a or img) was dragge over an input text it forced the cursor (caret) to move along ith the dragged item and the content was dropped in that exact place in the text.

This did not work with div so what I did was create my items as <a> tags with empty href and then I switched the event.dataTransfer content in ondragstart event so that what was dropped was not the url (as it happens by default) but my custom text.

I did it using knockout binding:

<a class="measure-draggable" data-bind="html: title(), event: {'dragstart':$parent.setTransferProperties}" draggable="true"></a>

And behind the scenes in viewModel (coffeescript):

setTransferProperties: (sender, evt) ->
    evt.originalEvent.dataTransfer.setData("text/plain", "{{" + sender.title() + "}}")
    true

This does the trick

Here is the working fiddle: https://jsfiddle.net/foqb7b95/

Upvotes: 5

Related Questions