Safari浏览器中HTML元素拖拽异常问题

在Chrome和Firefox浏览器中，包含可拖拽排序列表项的对话框功能正常，但在Safari中拖拽列表项时，会同时拖拽对话框后方的页面内容。这是由于Safari的拖拽事件处理机制与其他浏览器存在差异，即使对话框设置了高z-index，拖拽事件仍可能穿透到下层元素。

解决步骤 #

1. 添加遮罩层阻挡后方内容

给对话框添加全屏遮罩层，遮罩层z-index设为比对话框低，完全覆盖页面内容，从视觉和事件层面阻挡拖拽穿透到后方元素。

2. 完善拖拽事件处理

在dragstart事件中同时调用stopPropagation()和preventDefault()，确保事件不会扩散到页面其他元素，避免Safari默认的文本选择行为干扰拖拽。

3. 同步控制对话框与遮罩层的显示/隐藏

打开对话框时显示遮罩层，关闭对话框时隐藏遮罩层，恢复页面正常交互。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    #dialog-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.1);
      z-index: 998;
    }

    #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');
      const overlay = document.getElementById('dialog-overlay');
      dialog.style.display = 'block';
      overlay.style.display = 'block';
    }

    function closeDialog() {
      const dialog = document.getElementById('dialog');
      const overlay = document.getElementById('dialog-overlay');
      dialog.style.display = 'none';
      overlay.style.display = 'none';
    }

    function dragStart(event) {
      event.stopPropagation();
      event.preventDefault();
      event.dataTransfer.setData('text/plain', event.target.textContent);
      event.dataTransfer.effectAllowed = 'move';
    }

  </script>
  <button onclick="openDialog()">Open Dialog</button>

  <div id="dialog-overlay"></div>
  <div id="dialog">
    <button onclick="closeDialog()">Close</button>
    <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>

额外优化说明 #

• 遮罩层不仅解决拖拽穿透问题，还能增强对话框的模态效果，提升用户体验。
• 新增关闭按钮，方便用户关闭对话框并恢复页面交互。

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