I’ve got another real world example of how to use jQuery to enhance your website. A friend emailed me this morning wondering if it was possible to insert text using the click event or drag n’ drop into a textarea. jQuery and jQuery UI to the rescue! Review the screenshots below or just go check out the demo page.
See also: Selecting items with Drag n’ Drop
Shaun,
That is a cool idea. You might want to add a .css(“cursor”, “pointer”) in there or update your CSS file with the same for the links on the left as an improvement?
Bill
Good point. Done!
Possible to do the same thing with a div? For instance, say I have selected some text within a DIV, would it be possible to paste the text over the selection doing some sort of innerHTML replace?
Is there a way to make it so when the item is dropped it will return to the next line down so the next item that is dropped will go below the first one?
Hi there,
I was wondering if you can update it with the option to drag a text at a given point in the textarea, so you can place the text between other text
Thank you! 🙂
HI.
Just wanted to send cudos and thanks!
One question, though, is there an update that will help it work better in IE? I can’t seem to get it working right in IE8 on Windows 7.
Best Regards,
Brain
This is a great feature! I love it. I have a project where I’d like the user administrating the data to be able to drag-drop items into the text fields similar to your demo.
However, the one thing that I’d love to be able to do is remove items from the drag/drop list after they’ve been added to a field.
Have you implemented something like this? I’m not confident on coding this myself, but on the logic end, after drop, a function can be passed to remove the item from the list.
Your thoughts? And if you are able to provide the logic, that would be fantastic.
Hi – The drag n drop doesn’t work with –
http://code.jquery.com/jquery-1.10.1.min.js
http://code.jquery.com/jquery-migrate-1.2.1.min.js
Sorry forgot to attach the code above..
Thanks.
when i downloaded js files and put them in a folder in my project and change the javaScript src property to read from my js files in that folder, it does not work.
please help me…
Well, this is not helpfull for my case – because I want to drag the text into the textarea – and insert it at the position where I stop the drag (not where the cursor was before the drag started).
Any Ideas?
Would it be possible to drag and drop onto another web page where there is a simple text box?
Reply:
Is there a way to make it so when the item is dropped it will return to the next line down so the next item that is dropped will go below the first one?
Yes, just modify this line: $(“#txtMessage”).insertAtCaret($(this).text());
To this: $(“#txtMessage”).insertAtCaret($(this).text()+”\n”);