Creating Simple Drag and Drop using jQuery UI Tutorial

In this tutorial, I've created a simple drag and drop using jQuery and jQuery UI Libraries. In this tutorial, the user will select his/her choice and with the use of jquery, we are going to determine the user's choice. I hope this tutorial will give you knowledge on the topic.

Before we start, please download the following libraries first:

Let's Get Started...

Creating our Page

We create our page that contains the selection list, the drop area, and the results area. Save the file as index.html.

Creating the Interface

The script below is the code for our user-interface.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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.  
  9. <div style="height:30px;"></div>
  10. <div class="row">
  11. <div class="col-md-3">
  12. </div>
  13. <div class="col-md-6 well">
  14. <div class="row">
  15. <div class="col-lg-12">
  16. <h2 class="text-primary">Drag and Drop using AJAX/JQuery</h2>
  17. </center>
  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:11px;" class="alert-danger">Select your favorite fruit</label></center>
  21. <ul style="list-style-type:none;" id="draggable">
  22. <li>Apple</li>
  23. <li>Orange</li>
  24. <li>Strawberry</li>
  25. <li>Mango</li>
  26. <li>Pineapple</li>
  27. <li>Grapes</li>
  28. <li>Banana</li>
  29. <li>Jackfruit</li>
  30. <li>Lemon</li>
  31. <li>Peach</li>
  32. </ul>
  33. <p></p>
  34. </div>
  35. <div class="pull-right">
  36. <div style="padding:20px; border:1px #000 dotted; width:400px;">
  37. <div class="form-group">
  38. <input type="text" id="word" name="program" class="form-control p_lang ui-droppable" />
  39. <center><label>Drop your choice here</label></center><br>
  40.  
  41. <button class="btn btn-danger" id="reset" type="button"><span class = "glyphicon glyphicon-refresh"></span> Reset</button> <button class="btn btn-success" id="submit"><span class = "glyphicon glyphicon-check"></span> Submit</button>
  42.  
  43. </div>
  44.  
  45. </div><br>
  46. <div style="padding:20px; border:1px #000 dotted; width:400px;">
  47. You have selected: <strong><span id="result_text"></span></strong>
  48.  
  49. </div>
  50. </div>
  51. </div>
  52. </div><br>
  53. </div>
  54. </div>
  55. </body>
  56. <script src="js/jquery-3.1.1.js"></script>
  57. <script src="js/jquery-ui.js"></script>
  58. </html>

Creating The Script

The code below is our javascript script for the drag ad drop functionalities. And also, this includes the functions for the reset and submit buttons. You can add this code inside your index.html file and wrap it inside the <script></script> tag or you can save it in seperate file and include the file in you html file i.e. <script src="js/drag_and_drop.js"></script>

  1. $(document).ready(function(){
  2. $('#reset').on('click', function(){
  3. $('ul').attr('id', 'draggable');
  4. $('.p_lang').removeAttr('disabled', 'disabled');
  5. $('.p_lang').val('');
  6. $('#result_text').text('');
  7. });
  8.  
  9. $('#submit').on('click', function(){
  10. var text = $('#word').val();
  11. if(text != ""){
  12. $('#result_text').text(text);
  13. }
  14. else{
  15. alert("Please select your choice first");
  16. }
  17. });
  18.  
  19. $('li').mouseover(function(){
  20. $(this).css('cursor', 'pointer');
  21. });
  22. $( "#draggable li" ).draggable({helper: 'clone'});
  23. $(".p_lang").droppable({
  24. accept: "#draggable li",
  25. drop: function(ev, ui) {
  26. $(this).insertAtCaret(ui.draggable.text());
  27. $(this).attr('disabled', 'disabled');
  28. $("#draggable").removeAttr('id');
  29. }
  30. });
  31. });
  32.  
  33. $.fn.insertAtCaret = function (myValue) {
  34. return this.each(function(){
  35. if (document.selection) {
  36. this.focus();
  37. sel = document.selection.createRange();
  38. sel.text = myValue;
  39. this.focus();
  40. }
  41.  
  42. else if (this.selectionStart || this.selectionStart == '0') {
  43. var startPos = this.selectionStart;
  44. var endPos = this.selectionEnd;
  45. var scrollTop = this.scrollTop;
  46. this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
  47. this.focus();
  48. this.selectionStart = startPos + myValue.length;
  49. this.selectionEnd = startPos + myValue.length;
  50. this.scrollTop = scrollTop;
  51. } else {
  52. this.value += myValue;
  53. this.focus();
  54. }
  55. });
  56. };

DEMO

There you go! You can now test the source code by browsing the HTML File in a Browser. I hope this Simple Drag and Drop using jQuery UI Tutorial will help you with what you are looking for.

Here's the Full Source Code in a single html file.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  8. </head>
  9.  
  10. <body>
  11. <div style="height:30px;"></div>
  12. <div class="row">
  13. <div class="col-md-3">
  14. </div>
  15. <div class="col-md-6 well">
  16. <div class="row">
  17. <div class="col-lg-12">
  18. <center>
  19. <h2 class="text-primary">Drag and Drop using AJAX/JQuery</h2>
  20. </center>
  21. <hr style="border-top: 1px dotted #8c8b8b;" />
  22. <div class="pull-left" style="border:1px #000 dotted; width:230px;">
  23. <center><label style="font-size:11px;" class="alert-danger">Select your favorite fruit</label></center>
  24. <ul style="list-style-type:none;" id="draggable">
  25. <li>Apple</li>
  26. <li>Orange</li>
  27. <li>Strawberry</li>
  28. <li>Mango</li>
  29. <li>Pineapple</li>
  30. <li>Grapes</li>
  31. <li>Banana</li>
  32. <li>Jackfruit</li>
  33. <li>Lemon</li>
  34. <li>Peach</li>
  35. </ul>
  36. <p></p>
  37. </div>
  38. <div class="pull-right">
  39. <div style="padding:20px; border:1px #000 dotted; width:400px;">
  40. <div class="form-group">
  41. <input type="text" id="word" name="program" class="form-control p_lang ui-droppable" />
  42. <center><label>Drop your choice here</label></center><br>
  43.  
  44. <button class="btn btn-danger" id="reset" type="button"><span class = "glyphicon glyphicon-refresh"></span> Reset</button> <button class="btn btn-success" id="submit"><span class = "glyphicon glyphicon-check"></span> Submit</button>
  45.  
  46. </div>
  47.  
  48. </div><br>
  49. <div style="padding:20px; border:1px #000 dotted; width:400px;">
  50. You have selected: <strong><span id="result_text"></span></strong>
  51.  
  52. </div>
  53. </div>
  54. </div>
  55. </div><br>
  56. </div>
  57. </div>
  58. </body>
  59. <script src="js/jquery-3.1.1.js"></script>
  60. <script src="js/jquery-ui.js"></script>
  61. <script type="text/javascript">
  62. $(document).ready(function() {
  63. $('#reset').on('click', function() {
  64. $('ul').attr('id', 'draggable');
  65. $('.p_lang').removeAttr('disabled', 'disabled');
  66. $('.p_lang').val('');
  67. $('#result_text').text('');
  68. });
  69.  
  70. $('#submit').on('click', function() {
  71. var text = $('#word').val();
  72. if (text != "") {
  73. $('#result_text').text(text);
  74. } else {
  75. alert("Please select your choice first");
  76. }
  77. });
  78.  
  79. $('li').mouseover(function() {
  80. $(this).css('cursor', 'pointer');
  81. });
  82. $("#draggable li").draggable({
  83. helper: 'clone'
  84. });
  85. $(".p_lang").droppable({
  86. accept: "#draggable li",
  87. drop: function(ev, ui) {
  88. $(this).insertAtCaret(ui.draggable.text());
  89. $(this).attr('disabled', 'disabled');
  90. $("#draggable").removeAttr('id');
  91. }
  92. });
  93. });
  94.  
  95. $.fn.insertAtCaret = function(myValue) {
  96. return this.each(function() {
  97. if (document.selection) {
  98. this.focus();
  99. sel = document.selection.createRange();
  100. sel.text = myValue;
  101. this.focus();
  102. } else if (this.selectionStart || this.selectionStart == '0') {
  103. var startPos = this.selectionStart;
  104. var endPos = this.selectionEnd;
  105. var scrollTop = this.scrollTop;
  106. this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
  107. this.focus();
  108. this.selectionStart = startPos + myValue.length;
  109. this.selectionEnd = startPos + myValue.length;
  110. this.scrollTop = scrollTop;
  111. } else {
  112. this.value += myValue;
  113. this.focus();
  114. }
  115. });
  116. };
  117. </script>
  118. </html>

HAPPY CODING :)

Add new comment