title: Is it possible to make td elements sortable from two different table in two different div
body: <p>I am making a UI which consists of two different <code>table</code> elements in two different <code>div</code>. Now I have a requirement which means that I can either move one <code>td</code> element form one <code>table</code> to another <code>td</code> element or they both can be sortable. Is it possible to do that? If so then what plugin or method could I use?</p>
  
  <p>This is the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="cool" draggable="true"&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;1&lt;/th&gt;
          &lt;th&gt;2&lt;/th&gt;
          &lt;th&gt;3&lt;/th&gt;
          &lt;th&gt;4&lt;/th&gt;
          &lt;th&gt;lunch&lt;/th&gt;
          &lt;th&gt;5&lt;/th&gt;
          &lt;th&gt;6&lt;/th&gt;
          &lt;th&gt;7&lt;/th&gt;
          &lt;th&gt;8&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr class="sortable list"&gt;
          &lt;td draggable="true" style="background-color:green"&gt;monday&lt;/td&gt;
          &lt;td draggable="true" style="background-color:red"&gt;eng&lt;/td&gt;
          &lt;td draggable="true" style="background-color:blue"&gt;hindi&lt;/td&gt;
          &lt;td draggable="true" style="background-color:yellow"&gt;maths&lt;/td&gt;
          &lt;td draggable="true" style="background-color:red"&gt;eng&lt;/td&gt;
          &lt;td draggable="true" style="background-color:blue"&gt;hindi&lt;/td&gt;
          &lt;td draggable="true" style="background-color:yellow"&gt;maths&lt;/td&gt;
          &lt;td draggable="true" style="background-color:red"&gt;eng&lt;/td&gt;
          &lt;td draggable="true" style="background-color:blue"&gt;hindi&lt;/td&gt;
          &lt;td draggable="true" style="background-color:yellow"&gt;maths&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the second div is </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="fool"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td draggable="true" style="background-color:blue"&gt;english&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td draggable="true" style="background-color:yellow"&gt;hindi&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td draggable="true" style="background-color:green"&gt;maths&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td draggable="true" style="background-color:white"&gt;physics&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>