Prevent draggable links

Attempt to prevent links from being draggable, a bunch of different ways.

by David Iglesias

HTML

<ul>
  <li><strong>draggable=false</strong>
    <ul>
      <li><a href="#" draggable="false">attribute only</a></li>
      <li><a href="#" draggable="false" class="noDrag">+ no dragstart</a></li>
      <li><a href="#" draggable="false" class="noSelect">+ no selectstart</a></li>
    </ul>
  </li>
  <li><strong>JS only</strong>
    <ul>
      <li><a href="#" class="noDrag">prevent dragstart</a></li>
      <li><a href="#" class="noDrag noSelect">prevent dragstart and selectstart</a></li>
    </ul>
  </li>
  <li><strong>CSS</strong>
    <ul>
      <li><a href="#" id="userDrag">user-drag: none</a></li>
    </ul>
  </li>
</ul>

CSS

#userDrag {
  -webkit-user-drag: none;
  user-drag: none;
}

JavaScript

document.querySelectorAll('.noDrag').forEach((element) => {
  element.addEventListener('dragstart', (event) => {
    console.log('Stopping drag event');
    event.preventDefault();
  });
});

document.querySelectorAll('.noSelect').forEach((element) => {
  element.addEventListener('selectstart', (event) => {
    console.log('Stopping select event');
    event.preventDefault();
  });
});