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

我在这里尝试对单元格数据执行拖放操作这里我想做的是，获取正在拖放内容的单元格的单元格标题名称，这里我能够获取正在拖放内容的单元格标题
这是我用于拖放功能的代码

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

           };
       });
})

标题1
标题1
标题1
第1行
aaa
bbb
第2行
$（文档）.ready（函数（）{
$（'.event'）。打开（“dragstart”，函数（事件）{
var dt=event.originalEvent.dataTransfer；
dt.setData（'Text'，$（this.attr（'id'））；
});
$（'table td'）.on（“dragenter dragover drop”，函数（事件）{
event.preventDefault（）；
如果（event.type=='drop'）{
var data=event.originalEvent.dataTransfer.getData（'Text'，$（this.attr（'id'））；
if（$（this）.find（'span'）。长度==0）{
de=$（'#'+数据）.detach（）；
de.appendTo（$（本））；
}
};
});
})

---

您可以使用当前单元格的索引来获取标题

这是我的答案

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

                }
                ;
            });
        })

这是工作小提琴

---

我不知道这对您是否有帮助，但您可以将标题的名称添加为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));    
              }

       };
   });
});

标题1
标题1
标题1
aaa
bbb
$（文档）.ready（函数（）{
$（'.event'）。打开（“dragstart”，函数（事件）{
var dt=event.originalEvent.dataTransfer；
dt.setData（'Text'，$（this.attr（'id'））；
var headName=$（this.attr（'class'）。remove（'event'）；
});
$（'table td'）.on（“dragenter dragover drop”，函数（事件）{
event.preventDefault（）；
如果（event.type=='drop'）{
var data=event.originalEvent.dataTransfer.getData（'Text'，$（this.attr（'id'））；
if（$（this）.find（'span'）。长度==0）{
de=$（'#'+数据）.detach（）；
de.appendTo（$（本））；
}
};
});
});

如果我想对每行的第一个单元格做同样的操作，那么我该怎么做呢？意味着我想显示单元格标题和正在删除我的内容的行的第一个单元格。您可以使用最近的（）函数选择拖动单元格的行，然后使用find（）获得第一个td，如firstColText=$（this）。最近的（'tr'）。find（'td:eq（0）'.text（）；这是更新后的提琴我还有一个疑问，我们可以在dragstart事件中执行相同的操作吗？是的，您可以使用Nestest（）在dragstart事件中查找span元素的父tr（行）或td（单元格）是否希望第一列文本和标题与drop事件相同？