document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  5.   <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  6.   <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  7.   <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  8.   <style>
  9.   body {font-family:Arial;}
  10.   h2 {margin:5px;}
  11.   input[type=text] {margin:10px}
  12.   input[type=button] {margin:10px}  
  13.   .container {width: 20%; float:left;clear: right;margin:10px; border-radius: 5px;}
  14.   .sortable { list-style-type: none; margin:0; padding:2px; min-height:30px; border-radius: 5px;}
  15.   .sortable li { margin: 3px 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;}
  16.   .sortable li span { position: absolute; margin-left: -1.3em; }
  17.  
  18.   .card{background-color:white;border-radius:3px;}
  19.   </style>
  20.   <script>
  21.   $(function() {
  22.     $( ".sortable" ).sortable({
  23.       connectWith: ".connectedSortable",
  24.       receive: function( event, ui ) {
  25.         $(this).css({"background-color":"blue"});
  26.       }
  27.     }).disableSelection();
  28.     $(\'.add-button\').click(function() {
  29.         var txtNewItem = $(\'#new_text\').val();
  30.         $(this).closest(\'div.container\').find(\'ul\').append(\'<li class="card">\'+txtNewItem+\'</li>\');
  31.     });    
  32.   });
  33.   </script>      
  34. </head>
  35. <body>
  36. </body>
  37. <div>
  38. <div class="container" style="background-color:pink;">
  39. <h2>TODO</h2>
  40. <ul class="sortable connectedSortable">
  41.   <li class="card">Activity A1</li>
  42.   <li class="card">Activity A2</li>
  43.   <li class="card">Activity A3</li>
  44. </ul>
  45. <div class="link-div">
  46.     <input type="text" id="new_text" value=""/>
  47.     <input type="button" name="btnAddNew" value="Add" class="add-button"/>
  48. </div>
  49. </div>
  50. <div class="container" style="background-color:orange;">
  51. <h2>In Progress</h2>
  52. <ul class="sortable connectedSortable" >
  53.   <li class="card">Activity B1</li>
  54.   <li class="card">Activity B2</li>
  55. </ul>
  56. </div>
  57. <div class="container" style="background-color:yellow;">
  58. <h2>Verification</h2>
  59. <ul class="sortable connectedSortable" >
  60.   <li class="card">Activity C1</li>
  61.   <li class="card">Activity C2</li>
  62. </ul>
  63. </div>
  64. <div class="container" style="background-color:green;">
  65. <h2>Done</h2>
  66. <ul class="sortable connectedSortable" >
  67. </ul>
  68. </div>
  69. </div>
  70. </html>
');