我有一个对话框，在该对话框中，我有一个项目列表，每个列表项都可以拖动并相应地对 UI 进行排序。它在 Chrome 和 Firefox 中完美运行，但在 Safari 中，当我拖动列表项时，它还拖动了对话框后面存在的一些内容块。
代码在这里
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#dialog {
display: none;
position: fixed;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
z-index: 999;
}
#sortable-list {
list-style-type: none;
padding: 0;
margin: 0;
}
#sortable-list li {
cursor: grab;
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<script>
function openDialog() {
const dialog = document.getElementById('dialog');
dialog.style.display = 'block';
}
function dragStart(event) {
event.stopPropagation();
event.dataTransfer.setData('text/plain', event.target.textContent);
event.dataTransfer.effectAllowed = 'move';
}
</script>
<button onclick="openDialog()">Open Dialog</button>
<div id="dialog">
<ul id="sortable-list" style="width:600px">
<li draggable="true" ondragstart="dragStart(event)">Item 1</li>
<li draggable="true" ondragstart="dragStart(event)">Item 2</li>
<li draggable="true" ondragstart="dragStart(event)">Item 3</li>
</ul>
</div>
<!-- DUMMY DATA -->
<p>
The standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</p>
</body>
</html>它看起来像 iOS Safari 中的 webkit bug。我发现解决这个问题的唯一方法是将
position:fixed