title: How to Drag and Drop multiple table cells in same table?
body: <p>I want to drag and drop multiple cells from a table, but the code which I am referring to is limited to a single cell operations. But I want to perform the same operation for multiple cells. Code am using is below:</p>
  
  <pre class="lang-css prettyprint-override"><code>table th,table td{
      height: 30px;
      width: 200px;
  
  }
  table span{
      display:block;
      background-color: #09C;
      height: 100%;
      width: 100%;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table id="#our_table"  border="1"&gt;
      &lt;tr&gt;
          &lt;th&gt;head1&lt;/th&gt;
          &lt;th&gt;head1&lt;/th&gt;
          &lt;th&gt;head1&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;span class="event" id="a" draggable="true"&gt;aaa&lt;/span&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){
      $('.event').on("dragstart", function (event) {
          var dt = event.originalEvent.dataTransfer;
          dt.setData('Text', $(this).attr('id'));
      });
      $('table td').on("dragenter dragover drop", function (event) {  
          event.preventDefault();
          if (event.type === 'drop') {
              var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
              de = $('#'+data).detach();
              de.appendTo($(this));   
          };
      });
  })
  </code></pre>
  
  <p>This is the <a href="http://jsfiddle.net/videma/egt4U/" rel="nofollow noreferrer">fiddle</a>.</p>