<div class="demo">
  
  <div class="demo-window">
    <div class="demo-win-bar"></div>
    <div class="demo-win-body"></div>
  </div>
  
  <code></code>
  
</div>
body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  color: white;
}

.demo {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #35797a;
}

.demo-window {
  width: 120px;
  height: 120px;
  background: silver;
  padding: 3px;
  display: flex;
  flex-direction: column;
}

.demo-win-bar {
  background: #000082;
  width: 100%;
  height: 24px;
  cursor: grab;
}

.demo-win-body {
  width: 100%;
  flex-grow: 1;
  background: white;
  margin-top: 3px;
}

.demo code {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 165px;
  height: 45px;
  background-color: rgb(255,255,255,0.15);
  color: black;
  padding: 8px 2px 4px 8px;
  font-size: 0.9em;
  visibility: hidden;
}
// Initializes the element as draggable
let draggieDemo = new Draggabilly(".demo-window", {
  
  // select a 'handle' for dragging our element
  handle: ".demo-win-bar",
  
  // define the boundary area for dragging our element
  containment: ".demo",
  
  // define the grid to snap our elements's position to; every [ x, y ] pixels.
  grid: [10, 10]
});

// EXTRA
// display latest dragEvent, status of pointer, and position of element in the page.
(function () {
  let demo = document.querySelector(".demo");
  let output = demo.querySelector("code");
  
  demo.addEventListener('mousedown', function(){
    output.style.visibility='visible';
    console.log('click');
  });

  function notify(dragEvent, draggieInstance, event, pointer) {
    let position = draggieInstance.position;
    let message = "Current: " + dragEvent + ". \n" + event.type + ": " + Math.round(pointer.pageX) + ", " + Math.round(pointer.pageY) + ". \n" + "Position: " + position.x + ", " + position.y + ". \n";
    output.textContent = message;
  }

  draggieDemo.on("pointerDown", function (event, pointer) {
    notify("pointerDown", this, event, pointer);
  });

  draggieDemo.on("dragStart", function (event, pointer) {
    notify("dragStart", this, event, pointer);
  });

  draggieDemo.on("dragMove", function (event, pointer) {
    notify("dragMove", this, event, pointer);
  });

  draggieDemo.on("dragEnd", function (event, pointer) {
    notify("dragEnd", this, event, pointer);
  });

  draggieDemo.on("staticClick", function (event, pointer) {
    notify("staticClick", this, event, pointer);
  });
  
})();

// External library: draggabilly.js by David Desandro
// https://draggabilly.desandro.com/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.js