Drag and Drop Inserting Text to Input Textbox with jQuery

Submitted by razormist on Tuesday, January 10, 2017 - 17:34.

Language

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

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css" />
        </head>
<body>
<nav class = "navbar navbar-default">
        <div class = "container-fluid">
                <a href = "https://www.sourcecodester.com" class = "navbar-brand">Sourcecodester</a>
        </div>
</nav>
<div class = "row">
        <div class  = "col-md-3"></div>
        <div class  = "col-md-6 well">
                <h3 class = "text-primary">Drag and drop inserting text to input text box with jQuery</h3>
                <hr style = "border-top: 1px dotted #8c8b8b;"/>
                        <div class = "pull-left" style = "border:1px #000 dotted; width:230px;">
                        <center><label style = "font-size:9px;" class = "alert-danger">Please drag your favorite programming language</label></center>
                                <ul  style = "list-style-type:none;" id = "draggable">
                                        <li>PHP</li>
                                        <li>Javascript</li>
                                        <li>Java</li>
                                        <li>HTML</li>
                                        <li>C</li>
                                        <li>C++</li>
                                        <li>C#</li>
                                        <li>Python</li>
                                        <li>Vb.net</li>
                                        <li>Ruby</li>
                                        <li>Pearl</li>
                                </ul>
                                <p></p>
                        </div>
                        <div class = "pull-right" style = "padding:20px; border:1px #000 dotted; width:400px;">
                                <div class = "form-group">
                                        <input type = "text" name = "program" class = "form-control p_lang ui-droppable" />
                                        <center><label>Your favorite language</label></center>
                                        <button class = "btn btn-success pull-left" id = "reset" type = "button"><span class = "glyphicon glyphicon-refresh"></span> Reset</button>
                                </div>
                        </div>  
        </div>
</div>
</body>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script type = "text/javascript">
  $(document).ready(function(){
          $('#reset').on('click', function(){
                  $('ul').attr('id', 'draggable');
                  $('.p_lang').removeAttr('disabled', 'disabled');
                  $('.p_lang').val('');
          });
                $('li').mouseover(function(){
                        $(this).css('cursor', 'pointer');
                });
                $( "#draggable li" ).draggable({helper: 'clone'});
                $(".p_lang").droppable({
                        accept: "#draggable li",
                        drop: function(ev, ui) {
                        $(this).insertAtCaret(ui.draggable.text());
                        $(this).attr('disabled', 'disabled');
                        $("#draggable").removeAttr('id');
                        }
                });
  });
  
  $.fn.insertAtCaret = function (myValue) {
  return this.each(function(){
  if (document.selection) {
    this.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    this.focus();
  }
  
  else if (this.selectionStart || this.selectionStart == '0') {
    var startPos = this.selectionStart;
    var endPos = this.selectionEnd;
    var scrollTop = this.scrollTop;
    this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
    this.focus();
    this.selectionStart = startPos + myValue.length;
    this.selectionEnd = startPos + myValue.length;
    this.scrollTop = scrollTop;
  } else {
    this.value += myValue;
    this.focus();
  }
  });
};
</script>
</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!!!

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

1284 views