セルの内容をドラッグアンドドロップするときにヘッダーセル名を取得する方法

Question

ここでセルデータのドラッグアンドドロップ操作を実行しようとしています。ここでは、コンテンツをドロップしているセルのセルヘッダー名を取得します。これはコードであるコンテンツ
をドラッグしています、そのセルのセルのヘッダを取得することができ、ドラッグのために使用したと機能あなたはヘッダをフェッチするために、現在のセルのインデックスを使用することができます

<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

を落としています。ここで

が私の答え

$(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)); 
        } 

       } 
       ; 
      }); 
     }) 

そして、ここではフィドル http://jsfiddle.net/toLvzrLp/3/

Answer 2

を働いている私は、それはあなたに参考になるかどうか知っているかいないが、あなたはのためのプロパティとしてそのヘッダの名前を追加することができませんあなたのtdそしてドラッグ時に&ドロップするとアクセスできます。

たとえば、

<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));  
       } 

     }; 
    }); 
});