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

       };
   });
});

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

2 个答案: