Loading

Drag and Drop Inserting Text to Input Textbox with jQuery

Submitted by: 
Language: 
Visitors have accessed this post 457 times.

The Drag and Drop Inserting Text to Input Textbox with jQuery is a simple source code that can be used to any project. The purpose of this source code is to provide a new programming techniques with an advanced capability for web developers. I used Bootstrap as a front-end framework for a stunning Graphical User Interface / GUI. It is a user friendly kind of source code, feel free to modify it and use it to your project

This the sample source code

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
  7. </head>
  8. <body>
  9. <nav class = "navbar navbar-default">
  10. <div class = "container-fluid">
  11. <a href = "<a href="https://www.sourcecodester.com"" rel="nofollow">https://www.sourcecodester.com"</a> class = "navbar-brand">Sourcecodester</a>
  12. </div>
  13. </nav>
  14. <div class = "row">
  15. <div class = "col-md-3"></div>
  16. <div class = "col-md-6 well">
  17. <h3 class = "text-primary">Drag and drop inserting text to input text box with jQuery</h3>
  18. <hr style = "border-top: 1px dotted #8c8b8b;"/>
  19. <div class = "pull-left" style = "border:1px #000 dotted; width:230px;">
  20. <center><label style = "font-size:9px;" class = "alert-danger">Please drag your favorite programming language</label></center>
  21. <ul style = "list-style-type:none;" id = "draggable">
  22. <li>PHP</li>
  23. <li>Javascript</li>
  24. <li>Java</li>
  25. <li>HTML</li>
  26. <li>C</li>
  27. <li>C++</li>
  28. <li>C#</li>
  29. <li>Python</li>
  30. <li>Vb.net</li>
  31. <li>Ruby</li>
  32. <li>Pearl</li>
  33. </ul>
  34. <p></p>
  35. </div>
  36. <div class = "pull-right" style = "padding:20px; border:1px #000 dotted; width:400px;">
  37. <div class = "form-group">
  38. <input type = "text" name = "program" class = "form-control p_lang ui-droppable" />
  39. <center><label>Your favorite language</label></center>
  40. <button class = "btn btn-success pull-left" id = "reset" type = "button"><span class = "glyphicon glyphicon-refresh"></span> Reset</button>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </body>
  46. <script src="js/jquery-3.1.1.js"></script>
  47. <script src="js/jquery-ui.js"></script>
  48. <script type = "text/javascript">
  49. $(document).ready(function(){
  50. $('#reset').on('click', function(){
  51. $('ul').attr('id', 'draggable');
  52. $('.p_lang').removeAttr('disabled', 'disabled');
  53. $('.p_lang').val('');
  54. });
  55. $('li').mouseover(function(){
  56. $(this).css('cursor', 'pointer');
  57. });
  58. $( "#draggable li" ).draggable({helper: 'clone'});
  59. $(".p_lang").droppable({
  60. accept: "#draggable li",
  61. drop: function(ev, ui) {
  62. $(this).insertAtCaret(ui.draggable.text());
  63. $(this).attr('disabled', 'disabled');
  64. $("#draggable").removeAttr('id');
  65. }
  66. });
  67. });
  68.  
  69. $.fn.insertAtCaret = function (myValue) {
  70. return this.each(function(){
  71. if (document.selection) {
  72. this.focus();
  73. sel = document.selection.createRange();
  74. sel.text = myValue;
  75. this.focus();
  76. }
  77.  
  78. else if (this.selectionStart || this.selectionStart == '0') {
  79. var startPos = this.selectionStart;
  80. var endPos = this.selectionEnd;
  81. var scrollTop = this.scrollTop;
  82. this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
  83. this.focus();
  84. this.selectionStart = startPos + myValue.length;
  85. this.selectionEnd = startPos + myValue.length;
  86. this.scrollTop = scrollTop;
  87. } else {
  88. this.value += myValue;
  89. this.focus();
  90. }
  91. });
  92. };
  93. </script>
  94. </html>

I hope that this simple source code can help to your project and future project. For more updates and tutorials, just kindly visit this site. Enjoy Coding!!!


Tags: 

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.