如何在SafariHTML5中启用表格行的重影效果？

在Safari上拖动项目（

table

row）时，我没有重影效果。 我使用

表格

，所以这是一个

tr

。幻影效果是当你可以看到你的物品跟随你的鼠标

在Chrome上，它可以工作

有人知道为什么吗？

我注意到它不仅仅出现在

tr/td

上。如果我使用

li

或

a

，我可以看到重影效果

Chrome

Safari

---

在OSX Safari上，只要将与拖放相关的事件侦听器连接到表行，就会显示拖动辅助程序（重影效果）

<table>
    <tr id="row1" draggable="true">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr id="row2">
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

---

希望这能有所帮助。

回答得很晚，但我自己刚刚处理过这个问题，希望这对其他人发现这个问题可能有用

根据，Safari在为

中的

display:table row

元素生成拖动重影时存在一个错误（它似乎也适用于

display:table group

），答案建议将

display

属性更改为其他属性，这确实会导致创建正确的拖动重影，尽管它当然会以（可能）不需要的方式更改布局

我发现的诀窍是更改我的

onDragStart

处理程序中的样式，并使用超时（几乎）立即重置它。我还临时硬编码行和单元格的宽度，以匹配它们的当前大小，否则将重新计算。最后，我显式地设置了拖动图像，以确保它正确定位在鼠标指针下。下面是一个函数，在传递拖动事件时执行此操作：

函数hackRowForDragInSafari（事件）{
让row=event.target
for（行中的let单元格。单元格）{
cell.style.setProperty（'width'，cell.offsetWidth+'px'，'important'）
}
row.style.setProperty（'width'，row.offsetWidth+'px'，'important'）
row.style.setProperty（'display'、'block'、'important'）
设置超时（（）=>{
for（行中的let单元格。单元格）{
cell.style.removeProperty（'width'）
}
row.style.removeProperty（'display'）
row.style.removeProperty（'width'）
})
event.dataTransfer.setDragImage（event.target、event.offsetX、event.offsetY）
}

---

理想情况下，只有当UA是Safari时才会触发此操作，如果在单元格中使用拖动手柄，或者如果已经使用“待在桌子上”，则需要根据您的用例调整此操作，等等。

你是说如果你的文本阴影位于表格行中，文本阴影在chrome中不起作用吗？@nol请检查我的更新。很抱歉，它仍然不清楚。。。你是在用文字阴影来产生幻影效果吗？你为什么说文字阴影？也不在Ubuntu的Chrome上工作。

var row1 = document.getElementById('row1');
row1.addEventListener('dragstart', function(e) {
    //Dragstart code here
}, false);