2

I want the users of my application to be able to highlight text from a textarea and drag and drop it into a text input.

I want to change the default behavior (the user shouldn't have to hold down CTRL or ALT) to copy the text rather than being moved from the textarea to the input.

I've already tried using jQuery Draggable and Droppable. I could see how this would work if a div or a static static would be selected and a helper clone was used, but I don't know how to do it with a random text selection in a textarea.

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
user2525550
  • 21
  • 2
  • 1
    Isn't this a functionality of the browser / operating system and nothing to do with the browser / code? – James Jul 17 '13 at 15:17
  • You say that you tried using Draggable and Droppable, but can you explain what exactly you tried? AFAIK Draggable and Droppable are for entire html elements, and wouldn't be the correct approach for highlighted text in a textarea element. What else have you tried so far? – Zack Jul 17 '13 at 15:18
  • Have a look at this tutorial: http://www.htmlgoodies.com/html5/tutorials/html-5-drag-drop-basics.html#fbid=UOMuIcaZ6iu – Mohammad Areeb Siddiqui Jul 17 '13 at 15:19
  • There is an example of how to get the selected text in a textarea in this answer http://stackoverflow.com/questions/7186586/how-to-get-the-selected-text-in-textarea-using-jquery-in-internet-explorer-7 and the other answer there points to a jquery plugin that works for IE7, IE8, IE9, FF, Chrome that may help your cause. – Zack Jul 17 '13 at 15:30
  • I should have said that I already have the selected text from the textarea stored in a string, it's just the drag and drop/copy functionality that I'm having trouble with since the text itself is not an html element. – user2525550 Jul 17 '13 at 15:44

1 Answers1

1

You could try the following hack:

  1. On select create a transparent div and copy the selected text into it, with something like 'window.getSelection'
  2. Make the div Draggable and Droppable
  3. On drop get the content from the div, populate the input field and clear the div
david
  • 2,529
  • 1
  • 34
  • 50
Jarek.D
  • 1,274
  • 1
  • 8
  • 18