JSFiddle - React, Tailwind, and code Playground

by dreiv

HTML

<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/interact.js/1.2.6/interact.min.js"></script>

  <div id="b" style="position: absolute; background: yellow; padding: 5px 10px;">
  ref
  </div>


<div id="p" class="popper">
this is a popper
</div>

CSS

body, html {
  height: 100%
}
.popper {
  background: red;
  position: absolute;
  padding: 10px;
}

JavaScript

var popper = new Popper(document.getElementById('b'), document.getElementById('p'), {
    placement: 'bottom-end',
    modifiers: {
        flip: {
        	flipVariations: true,
          /* behavior: ['bottom-end', 'bottom-start'] */
        }
    }
});

interact('#b').draggable({
  restrict: {
    restriction: "parent",
    endOnly: true,
    elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
  },
  onmove: dragMoveListener
});
var x = 0, y = 0;
function dragMoveListener (event) {
  target = event.target,
    // keep the dragged position in the data-x/data-y attributes
    x += event.dx,
    y += event.dy;

  // translate the element
  target.style.top = y + 'px';
  target.style.left = x + 'px'

  popper.update();
}