title: How to use jQuery UI draggable and droppable in specific position in a table?
body: <p>I want to drag some items in a table and drop them on other table row that have specific number! (So I don't want jquery-UI-sortable) and here is my work:
  <a href="https://jsfiddle.net/f9pn29Lq/5/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>&lt;table width="320px"&gt;
  &lt;tbody&gt;
      &lt;tr style="line-height:30px"&gt;
          &lt;td width="10%"&gt;Pos1&lt;/td&gt;
          &lt;td width="90%" rowspan="5"&gt;
              &lt;div class="dragable-object" &gt;Item 1&lt;/div&gt;
              &lt;div class="dragable-object" &gt;Item 2&lt;/div&gt;
          &lt;/td&gt;
          &lt;/tr&gt;
      &lt;tr style="line-height:30px"&gt;&lt;td class="position" width="10%"&gt;Pos2&lt;/td&gt;
      &lt;tr style="line-height:30px"&gt;&lt;td class="position" width="10%"&gt;Pos3&lt;/td&gt;
      &lt;tr style="line-height:30px"&gt;&lt;td class="position" width="10%"&gt;Pos4&lt;/td&gt;
      &lt;tr style="line-height:30px"&gt;&lt;td class="position" width="10%"&gt;Pos5&lt;/td&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script type='text/javascript'&gt;
  
  $(".dragable-object").draggable({
      revert: "invalid"        
  });
  
  $(".position").droppable();
  &lt;/script&gt;
  </code></pre>
  
  <p>How should I do that?</p>