拖放单元格内容时如何获取标题单元格名称

Question

am here trying to perform drag and drop operations on cell data here what i want to do is,get the cell header name of the cell where am dropping content ,here am able to get cell header of that cell where am dragging content
this is the code am using for drag and drop functionality

<table id="#our_table"  border="1">
<tr>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</tr>
<tr><th>Row1<th>
<td><span class="event" id="a" draggable="true">aaa</span></td>
<td><span class="event" id="b" draggable="true">bbb</span></td>
<td></td>
</tr>
<tr>
<th>Row2<th>
<td></td>
<td></td>
<td></td>
</tr>
</table>


$(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'));
              if($(this).find('span').length===0){
                   de=$('#'+data).detach();
                   de.appendTo($(this));    
                  }

           };
       });
})

fiddle for drag and drop functinality

Answer 1

You can use index of current cell to fetch the header.

Here is my answer

$(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'));
                    if ($(this).find('span').length === 0) {
                        de = $('#' + data).detach();
                        index = $(this).index();
                        headerText = $("table th").eq(index).text();
                        console.log(headerText);
                        alert(headerText);
                        de.appendTo($(this));
                    }

                }
                ;
            });
        })

And here is working fiddle http://jsfiddle.net/toLvzrLp/3/

Answer 2

I don't know whether it would be helpful to you or not but you can add that header's name as property for your td and then at time of drag&drop you can access that.

For Example.

<table id="#our_table"  border="1">
  <tr>
    <th>head1</th>
    <th>head1</th>
    <th>head1</th>
  </tr>
  <tr>
    <td><span class="event head1" id="a" draggable="true">aaa</span></td>
    <td><span class="event head2" id="b" draggable="true">bbb</span></td>
    <td><span class="head3"></span></td>
  </tr>
  <tr>
    <td><span class="head1"></span></td>
    <td><span class="head2"></span></td>
    <td><span class="head3"></span></td>
  </tr>
</table>


$(document).ready(function(){
        $('.event').on("dragstart", function (event) {
             var dt = event.originalEvent.dataTransfer;
             dt.setData('Text', $(this).attr('id'));
             var headName=$(this).attr('class').remove('event');
        });
    $('table td').on("dragenter dragover drop", function (event) {  
       event.preventDefault();
       if (event.type === 'drop') {
          var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
          if($(this).find('span').length===0){
               de=$('#'+data).detach();
               de.appendTo($(this));    
              }

       };
   });
});