表格固定尺寸图片拖拽实现 解决图片失效、表格尺寸异常扩张问题

一、图片无法拖拽的核心原因与修复 #

• 可拖拽元素id完全重复：你给所有带event类的span都设置了相同的id="a"，HTML规范要求元素id必须唯一，jQuery的$('#id')选择器只会选中第一个匹配的元素，后续同id的元素完全无法被选中，拖拽时自然找不到要移动的目标元素。
  修复方式：不需要给每个span硬写唯一id，直接在拖拽事件中存储当前元素引用即可，避免重复id问题：

  function initDragAndDrop() {
    $('.event').on('dragstart', function(event) {
      const dt = event.originalEvent.dataTransfer;
      // 直接存储当前拖拽的DOM对象，无需依赖id
      dt.setData('text/plain', event.currentTarget);
    });
  
    $('table td').on('dragenter dragover drop', function(event) {
      event.preventDefault();
      if (event.type === 'drop') {
        // 读取存储的拖拽元素
        const draggedEl = event.originalEvent.dataTransfer.getData('text/plain');
        $(draggedEl).detach().appendTo($(this));
      }
    });
  }
  

• getData方法调用错误：你当前代码中写的event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'))不符合API规范，getData仅接受1个参数（要获取的数据类型），多传的参数完全无效，按照上面的写法修正即可。
• 动态新增行的绑定逻辑可优化：当前每次加行都要解绑重绑事件，可改用事件委托，给#targetTable统一绑定所有拖拽事件，无需重复初始化：

  $(function() {
    // 事件委托，只绑定一次，后续新增元素自动生效
    $('#targetTable').on('dragstart', '.event', function(event) {
      const dt = event.originalEvent.dataTransfer;
      dt.setData('text/plain', event.currentTarget);
    });
  
    $('#targetTable').on('dragenter dragover drop', 'td', function(event) {
      event.preventDefault();
      if (event.type === 'drop') {
        const draggedEl = event.originalEvent.dataTransfer.getData('text/plain');
        $(draggedEl).detach().appendTo($(this));
      }
    });
  
    $('#addRow').on('click', function() {
      $('#targetTable > tbody:last-child').append('<tr><td></td><td></td><td></td></tr>');
    });
  });
  

二、表格自动撑大的核心原因与修复 #

• 表格布局模式未锁定：默认表格采用table-layout: auto模式，会根据内容自动调整宽高，给表格添加固定布局即可锁定尺寸，不会被内容撑破：

  #targetTable {
    table-layout: fixed;
    border-collapse: collapse;
  }
  

• span样式宽度设置错误：你给table span设置了width: 200%，会让每个可拖拽元素宽度超出所在td的2倍，直接把宽度修正为适配td的尺寸，添加溢出处理避免内容撑开布局：

  table span {
    display: block;
    background-color: #09C;
    width: 100%;
    text-align: top;
    font-weight: bold;
    padding-top: 1px;
    max-width: 100%;
    overflow: auto;
  }
  

• HTML结构错误：你给<table>标签写了两个重复的id属性（id="targetTable"和id="myT"），浏览器只会识别第一个，删掉无用的重复id。同时补全所有未闭合的</span>标签（当前很多span闭合标签缺少斜杠，会导致布局错乱）。
• td尺寸设置不合理：你给部分td设置了width: 5px; height: 1px的过小固定值，完全无法容纳内部内容，会被强制撑开，可调整td的宽高为实际需要的尺寸，或给td添加overflow: hidden控制溢出内容。

三、额外优化 #

• 所有可拖拽元素保持draggable="true"属性即可，无需额外调整。
• 图片如果出现原生拖拽冲突，可给图片加pointer-events: none样式，让拖拽事件直接绑定到外层span上：

  table span img {
    pointer-events: none;
  }
  

内容的提问来源于stack exchange，提问作者user11597028