JSFiddle - React, Tailwind, and code Playground

by frumbert

HTML

<script src="https://unpkg.com/plain-draggable"></script>
<ol>
<li>drag the box until it snaps to the line</li>
<li>Resize the pane</li>
<li>I want the blue box to stick to the line</li>
</ol>

<div class="outer">

  <div class="drag">
  
  </div>
  
  <div class="line">
  
  </div>

</div>

CSS

.outer {
  margin: 1rem auto;
  width: 50vw;
  height: 50vh;
  border:1px solid indigo;
  position: relative;
  resize: both;
  overflow: scroll;
}

.drag {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 25px;
  height: 25px;
  background-color: blue;
}
.drag:after {
  position: absolute;
  top: 30px;
  left: 30px;
  height:1em;
  width:150px;
  content: attr(style);
}

.line {
  position: absolute;
  top: 0;
  left: 60%;
  bottom: 0;
  width: 1px;
  background-color: #999;
}

JavaScript

new PlainDraggable(document.querySelector(".drag"), {
	snap: document.querySelector(".line")
});