1

I am making a UI which consists of two different table elements in two different div. Now I have a requirement which means that I can either move one td element form one table to another td element or they both can be sortable. Is it possible to do that? If so then what plugin or method could I use?

This is the code:

<div id="cool" draggable="true">
  <table>
    <tbody>
      <tr>
        <th></th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>lunch</th>
        <th>5</th>
        <th>6</th>
        <th>7</th>
        <th>8</th>
      </tr>
      <tr class="sortable list">
        <td draggable="true" style="background-color:green">monday</td>
        <td draggable="true" style="background-color:red">eng</td>
        <td draggable="true" style="background-color:blue">hindi</td>
        <td draggable="true" style="background-color:yellow">maths</td>
        <td draggable="true" style="background-color:red">eng</td>
        <td draggable="true" style="background-color:blue">hindi</td>
        <td draggable="true" style="background-color:yellow">maths</td>
        <td draggable="true" style="background-color:red">eng</td>
        <td draggable="true" style="background-color:blue">hindi</td>
        <td draggable="true" style="background-color:yellow">maths</td>
      </tr>
    </tbody>
  </table>
</div>

and the second div is 

<div id="fool">
  <table>
    <tr>
      <td draggable="true" style="background-color:blue">english</td>
    </tr>
    <tr>
      <td draggable="true" style="background-color:yellow">hindi</td>
    </tr>
    <tr>
      <td draggable="true" style="background-color:green">maths</td>
    </tr>
    <tr>
      <td draggable="true" style="background-color:white">physics</td>
    </tr>
  </table>
</div>
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
deepak
  • 77
  • 7
  • Welcome to Stackoverflow! Please do some search/research before asking questions. It's not good idea to move `td`s. However, my question http://stackoverflow.com/questions/34471786/jqueryui-drag-and-drop-cell-contents-from-table-to-another-table-td-with-column may be helpful to you. Thanks. – Ravimallya Dec 28 '15 at 11:46
  • sorry i am new to ui development can you please tell me why 'td' can't be sorted as it is important for my visulization that they can be sorted – deepak Dec 28 '15 at 12:28
  • If you move a td, the dom tree may gets changed and design will mess up. ex: you've 5 `td`s in a table with 3 rows, and you move the second td from second row, the third td will become the second td now (in index wise also) and the at the end of row an empty space. – Ravimallya Dec 28 '15 at 12:57
  • no actually i want a swaping kind of function so tree design will not changed – deepak Dec 28 '15 at 13:05
  • Consider using jQuery-UI's `.sortable();` function and try to use `
      ` elements instead of tables to do it. You can create sortable lists (yes, you can also use tables) with jQuery-UI and you can connect multiple lists as well.       – Lionel Ritchie the Manatee Dec 28 '15 at 15:31
    • actually i was trying to use jquery-ui sortable but i desperately want two td element to be sortable or swapping is also okey – deepak Dec 29 '15 at 04:18
    • 1
      here is a pure javascript solution https://jsfiddle.net/ravimallya/su7Ljm1z/ . credit goes to @crl http://stackoverflow.com/users/3183756/crl – Ravimallya Dec 29 '15 at 04:55
    • there is no plugin right i have to perform it by pure javascript ?? – deepak Dec 29 '15 at 05:14
    • No. You need not to use any javascript dependencies. It's written in pure javascript. Only thing is need a javascript enabled browser. – Ravimallya Dec 29 '15 at 06:43

    0 Answers0