how to drag an td element and drop it in another td element in a table using jquery

Question

I am making an UI from which I have some static 'td' element and a table in which I have some 'td' element.Now I want to drag the static 'td' element and drop it and replace the existing 'td' element in it. I want to know which 'td' is replaced and by which 'td' it is replaced so I could update my database via 'PHP'.

This is code I have been using for drag and drop but not useful:

 $("#fool td").draggable({ revert: "invalid" // start: function(ev, ui){ ui.helper.width($(this).width()); } }); $('#cool').droppable({ accept : "#fool td", tolerance: 'pointer', greedy : true, hoverClass: 'highlight', drop: function(ev, ui) { alert('hi'); //$(this).innerHTML($(ui.draggable)); $(ui.droppable).replaceWith("<div>Some content</div>"); } }); 

My HTML code for static 'td' is:

 <div id="fool"><table id="draggable"><tr><td style="background-color:blue">english</td></tr><tr><td style="background-color:yellow">hindi</td></tr><tr><td style="background-color:green">maths</td></tr><tr><td style="background-color:white">physics</td></tr></table></div> <div id="cool"><table>---- all td elemenet ------</table></div> 

Where inside 'cool' div I am generating a dynamic table after that I want drag and drop on that cool table.

Answer 1

As i think you need to swap two TD so,

You can use Zepto plugin as its provide all your swapping information. refer : http://james2doyle.github.io/zepto-dragswap/

Answer 2

try this:

1. Include jQuery library and TableDnD.js

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

    <script type="text/javascript" src="js/jquery.tablednd.0.7.min.js"></script>

2. Call the plugin

    <script type="text/javascript">

    $(document).ready(function() {



    // Initialise the first table (as before)

    $("#table-1").tableDnD();





    });

    </script>

3. Markup

    <table id="table-1" cellspacing="0" cellpadding="2">

        <tr id="1"><td>1</td><td>One</td><td>some text</td></tr>

        <tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>

        <tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>

        <tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>

        <tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>

    <tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>

    </table>

for info click here....