How to limit JQuery selectable-helper's range?

How to limit JQuery selectable-helper's range?

I have a Table with JQuery's selectable feature.My Table was selectable each **td** which are in the same column. Below is my full html

  1.     <html>
  2.            <head>
  3.             <link href="/css/jquery-ui.css" rel="stylesheet" type="text/css">
  4.             <link href="/css/schedulerGrid.css" rel="stylesheet" type="text/css">
  5.             <script src="/js/jquery-ui.js" type="text/javascript">
  6.             <script src="/js/jquery.js" type="text/javascript">
  7.             <script src="/js/schedulerGrid.js" type="text/javascript">
  8.             </head>
  9.         <head>
  10.         <body>
  11.             <div class="scheduler-area">
  12.                 <div class="scheduler-container">
  13.                     <table class="scheduler">
  14.                         <thead>
  15.                             <tr>
  16.                                 <th class="header">
  17.                                     <div class="header-name">01</div>
  18.                                 </th>
  19.                                 <th class="header">
  20.                                     <div class="header-name">02</div>
  21.                                 </th>
  22.                                 <th class="header">
  23.                                     <div class="header-name">03</div>
  24.                                 </th>
  25.                                 <th class="header">
  26.                                     <div class="header-name">04</div>
  27.                                 </th>
  28.                                 <th class="header">
  29.                                     <div class="header-name">05</div>
  30.                                 </th>
  31.                                 <th class="header">
  32.                                     <div class="header-name">06</div>
  33.                                 </th>
  34.                                 <th class="header">
  35.                                     <div class="header-name">07</div>
  36.                                 </th>
  37.                             </tr>
  38.                         </thead>
  39.                         <tbody>
  40.                             <tr>
  41.                                 <td class="item"></td>
  42.                                 <td class="item"></td>
  43.                                 <td class="item"></td>
  44.                                 <td class="item"></td>
  45.                                 <td class="item"></td>
  46.                                 <td class="item"></td>
  47.                                 <td class="item"></td>
  48.                             </tr>
  49.                             <tr>
  50.                                 <td class="item"></td>
  51.                                 <td class="item"></td>
  52.                                 <td class="item"></td>
  53.                                 <td class="item"></td>
  54.                                 <td class="item"></td>
  55.                                 <td class="item"></td>
  56.                                 <td class="item"></td>
  57.                             </tr>
  58.                             <tr>
  59.                                 <td class="item"></td>
  60.                                 <td class="item"></td>
  61.                                 <td class="item"></td>
  62.                                 <td class="item"></td>
  63.                                 <td class="item"></td>
  64.                                 <td class="item"></td>
  65.                                 <td class="item"></td>
  66.                             </tr>
  67.                             <tr>
  68.                                 <td class="item"></td>
  69.                                 <td class="item"></td>
  70.                                 <td class="item"></td>
  71.                                 <td class="item"></td>
  72.                                 <td class="item"></td>
  73.                                 <td class="item"></td>
  74.                                 <td class="item"></td>
  75.                             </tr>
  76.                             <tr>
  77.                                 <td class="item"></td>
  78.                                 <td class="item"></td>
  79.                                 <td class="item"></td>
  80.                                 <td class="item"></td>
  81.                                 <td class="item"></td>
  82.                                 <td class="item"></td>
  83.                                 <td class="item"></td>
  84.                             </tr>
  85.                             <tr>
  86.                                 <td class="item"></td>
  87.                                 <td class="item"></td>
  88.                                 <td class="item"></td>
  89.                                 <td class="item"></td>
  90.                                 <td class="item"></td>
  91.                                 <td class="item"></td>
  92.                                 <td class="item"></td>
  93.                             </tr>
  94.                             <tr>
  95.                                 <td class="item"></td>
  96.                                 <td class="item"></td>
  97.                                 <td class="item"></td>
  98.                                 <td class="item"></td>
  99.                                 <td class="item"></td>
  100.                                 <td class="item"></td>
  101.                                 <td class="item"></td>
  102.                             </tr>
  103.                             <tr>
  104.                                 <td class="item"></td>
  105.                                 <td class="item"></td>
  106.                                 <td class="item"></td>
  107.                                 <td class="item"></td>
  108.                                 <td class="item"></td>
  109.                                 <td class="item"></td>
  110.                                 <td class="item"></td>
  111.                             </tr>
  112.                         </tbody>
  113.                     </table>
  114.                 </div>       
  115.             </div>
  116.         </body>
  117.     </html>

And JavaScript for selectable

  1.     var currentCol;
  2.     $(document).ready(function(){
  3.          $(".scheduler-container").selectable({
  4.                     filter: ".item",
  5.                     start: function(event, ui) {
  6.                         $(".item").removeClass("ui-selected");
  7.                     },
  8.                     stop: function(event, ui) {
  9.    
  10.                         //Reset selector.
  11.                         currentCol = undefined;
  12.                     },
  13.                     selecting: function(event, ui) {
  14.    
  15.                         if (currentCol === undefined) {
  16.                             currentCol = $(ui.selecting).index();
  17.                         }
  18.    
  19.                         var nthChild = parseInt(currentCol) + 1;
  20.                         for (var i = 1; i <= $(".scheduler").children('tbody').children('tr').children('.item').length; i++) {
  21.    
  22.                             if (i != nthChild) {
  23.                                 $(".item.ui-selecting:nth-child(" + i + ")").each(function() {
  24.                                     $(this).removeClass("ui-selecting");
  25.                                 });
  26.                             }
  27.                         }
  28.                         ;
  29.                     }
  30.          });
  31.     });

And CSS is

  1.     .scheduler-area  {
  2.         position: relative;
  3.         border: 1px solid #000;
  4.         padding-top: 37px;
  5.         background: #777777;
  6.         overflow: hidden;
  7.         background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0OTQ5NDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  8.         background: -moz-linear-gradient(top, #777777 0%, #494949 100%);
  9.         background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#777777), color-stop(100%,#494949));
  10.         background: -webkit-linear-gradient(top, #777777 0%,#494949 100%);
  11.         background: -o-linear-gradient(top, #777777 0%,#494949 100%);
  12.         background: -ms-linear-gradient(top, #777777 0%,#494949 100%);
  13.         background: linear-gradient(to bottom, #777777 0%,#494949 100%);
  14.         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#777777', endColorstr='#494949',GradientType=0 );
  15.     }
  16.    
  17.     .scheduler-container {
  18.       overflow-y: auto;
  19.       height: 200px;
  20.     }
  21.     .scheduler {
  22.       border-spacing: 0;
  23.       width:100%;
  24.     }
  25.     .scheduler .item + .item {
  26.       border-left:1px solid #777777;
  27.     }
  28.     .scheduler .item, .header {
  29.       border-bottom:1px solid #777777;
  30.       background: #F7F7F7;
  31.       color: #000;
  32.       padding: 25px;
  33.     }
  34.     .scheduler .header {
  35.       height: 0;
  36.       line-height: 0;
  37.       padding-top: 0;
  38.       padding-bottom: 0;
  39.       color: transparent;
  40.       border: none;
  41.       white-space: nowrap;
  42.       border-left: 1px solid #777777;
  43.       border-bottom: none;
  44.     }
  45.    
  46.     .scheduler .header:FIRST-CHILD {
  47.       border-left: none;
  48.     }
  49.     .scheduler .header .header-name{
  50.       position: absolute;
  51.       background: transparent;
  52.       color: #fff;
  53.       padding: 8px 25px;
  54.       top: 0;
  55.       margin-left: -26px;
  56.       line-height: normal;
  57.       border-left: 1px solid #393C44;
  58.       width: 165px;
  59.     }
  60.     .scheduler .header:first-child .header-name{
  61.       border: none;
  62.     }
  63.    
  64.     .scheduler .ui-selecting {
  65.         background: #97B58F;
  66.     }
  67.    
  68.     .scheduler .ui-selected {
  69.         background: #4C6840;
  70.         color: white;
  71.     }
  72.     .ui-selectable-helper {
  73.         border:1px solid #747474;
  74.     }

Here is JSFIDDLE Link .
My problem is I would like to restrict selectable-helpe r's selection range but I have no idea how to do it. Table's elements are selectable in the same column.So, the selection should be bound within the same column. How can I figure it with CSS or JavaScript ?