SCSS

HTML

<div class="card draggable-zone">
  <div class="wrapper draggable-box">
    <div class="qx-question-result ">
			<div>Draggable</div>
		</div>
  </div>
</div>

SCSS

$blue: #0084ff;
$blue-darker: darken($blue, 5);

body {
  background: #20262E;
  padding: 10px;
  font-family: Helvetica;
}

.card {
	border: 1px solid #ccc;
}

.wrapper {
	width: 300px;
	height: 200px;
	background-color: white;
	padding: 20px;
}

.draggable-zone{
	height: 500px;
	width: 400px;
}
 
.draggable-box{
	position: relative;
}

JavaScript

draggable({
  dragElem: document.querySelector('.draggable-box'),
  zoneElem: document.querySelector('.draggable-zone')
})

function draggable({
  dragElem,
  zoneElem
}) {
	dragElem.style.position = 'relative !important';
  dragElem.onmousedown = function(event) {
    event.preventDefault();

    let shiftY = event.clientX - dragElem.getBoundingClientRect().top;

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);

    function onMouseMove(event) {
      let newTop = event.clientY - shiftY - zoneElem.getBoundingClientRect().top;
      let bottomEdge = zoneElem.offsetHeight - dragElem.offsetHeight;

      if (newTop < 0) newTop = 0;
      if (newTop > bottomEdge) newTop = bottomEdge;

      dragElem.style.top = newTop + 'px';
    }

    function onMouseUp() {
      document.removeEventListener('mouseup', onMouseUp);
      document.removeEventListener('mousemove', onMouseMove);
    }
  };

  dragElem.ondragstart = function() {
    console.log("ondragstart")
    return false;
  };


}