使用 Firefox 在 TD 中拖放不起作用答案

【问题标题】：Drag and drop not working in TD with Firefox使用 Firefox 在 TD 中拖放不起作用
【发布时间】：2014-04-15 14:02:15
【问题描述】：

我为我的应用实现了拖放架构，但它仅适用于 IE 和 Chrome，不适用于 Firefox...

HTML：

<table>
            <thead>
                <tr>
                    <th>test</th>
                    <th>test</th>
                    <th>test</th>
                    <th>test</th>
                    <th>test</th>
                    <th>test</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>0</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                    <td>17</td>
                </tr>
                            </tbody>
                  </table>

JS：

        $('td').on({
            dragstart: function(e) { onDragStart($(this)); },
            dragenter: function(e) { onDragEnter(e, $(this)); },
            dragleave: function(e) {},
            dragover: function(e) { e.preventDefault(); },
            drop: function(e) {},
            dragend: function(e) { onDragEnd(e); }
        });

        var onDragStart = function onDragStart($case){
            sessionStorage.setItem('draggableText', $case.text());
        };


        var onDragEnter = function onDragEnter(e, $case){
            $case.addClass('onDraggableElement');
            e.preventDefault();
        };

        var onDragEnd = function onDragEnd(e){
            e.stopPropagation();
            $('td[draggable="true"').removeClass('onDraggableElement');
        }

【问题讨论】：

标签： jquery firefox drag-and-drop

【解决方案1】：

将 DIV 放入 TD。使 DIV 可拖动，而不是表格单元格。

【讨论】：

有表格单元格的解决方案吗？
考虑一下：你拖动一个单元格 - 你把它放在哪里？在另一个单元格上？然后那个单元格会嵌套在单元格内吗？走在前面吗？之后呢？前一个位置的空单元格会发生什么？相邻的单元格是否有一个 colspan 来占用空间？表格单元格不可定位。见：stackoverflow.com/questions/4564638/…
文本不是 HTML 元素，所以不能拖动。再次，将 DIV 放入单元格中，将文本放入 DIV 中并使 DIV 可拖动，而不是单元格本身。
好的，我就这么做。谢谢。