title: JQuery drag and drop not working in td
body: <p>This is the script i used</p>
  
  <pre><code>$(function () {
  
       $("#header").draggable({
     helper: "clone",
      cursor: 'move',
      tolerance: 'fit',
       containment: '#shoppingCart2'
  });
  
      $("#shoppingCart2").droppable({
  
          drop: function (e, ui) {
  
              if ($(ui.draggable)[0].id != "") {
                  x = ui.helper.clone();
              ui.helper.remove();
              x.draggable({
                  helper: 'original',
                  containment: '#shoppingCart2 ',
                  tolerance: 'fit'
              });
  
              x.appendTo('#container');
          }
  
          }
      });
  
  
   });
  </code></pre>
  
  <p>Below is the html code</p>
  
  <pre><code>            &lt;div id="header" style="width:180px;"&gt;&lt;span style="background-color:#FFFFFF"&gt;img&lt;/span&gt;&lt;/div&gt;&lt;br /&gt;
          &lt;br /&gt;
  
          &lt;div id="container"&gt;
  
  
  
          &lt;table width="200" id="shoppingCart2" border="1"&gt;
          &lt;tr&gt;
          &lt;td&gt;test1&lt;/td&gt;
          &lt;td id="t1" class="time"&gt; td1&amp;nbsp;&lt;/td&gt;
          &lt;td id="t2" class="time"&gt;td2&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;test2&lt;/td&gt;
          &lt;td class="time"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="time"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;test3&lt;/td&gt;
          &lt;td class="time"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td class="time"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>The script i used is: </p>
  
  <p><a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js</a></p>
  
  <p><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js" rel="nofollow">http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js</a></p>
  
  <p>while drag the "img", it droped in first td of each row. i couldn't dropped this in 2nd and 3rd tds of each row. Then i need to take the corresponding td id after dropped.  Please help me. </p>