Get started with draggable CDN

MIT licensed

Interactive UI component: grabbable and movable by user.

Tags:
  • shopify
  • draggable
  • drag-and-drop
  • es6

Stable version

Copied!

How to start using draggable CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with draggable CDN - cdnhub.io</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/draggable/1.1.3/draggable.min.js"></script>
</head>
<body>
  <div id="draggable" class="draggable">
    Drag me!
  </div>

  <script>
    const draggableElement = document.getElementById('draggable');

    new Draggable(draggableElement, {
      type: 'drag', // Enable dragging
      boundary: 'parent', // Constrain dragging within parent element
      onStart: () => {
        console.log('Drag started');
      },
      onEnd: () => {
        console.log('Drag ended');
      }
    });
  </script>
</body>
</html>

All versions