Drag HTML element issue in Safari browser

Question

I have a dialog box, and inside that dialog, I have a list of items, every list item can be dragged and sort UI accordingly. It works perfectly in Chrome and Firefox, but in Safari, when I dragged the list item, it also dragged the some chunk of content present behind the dialog.

Here the code

<!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>

Angelo Lucas · Accepted Answer · 2024-08-12 13:10:55Z

1

It looks like a webkit bug in iOS Safari. The only way I've found to solve this is to apply position:fixed to the body. It's not an ideal solution, as the page loses the scroll position and goes to the top. It can also cause strange effects on the layout. I suggest identifying the device and applying this solution to iOS only.

answered Aug 12, 2024 at 13:10

Angelo Lucas

6578 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Drag HTML element issue in Safari browser

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related