Puzzle with DIV

Question

In my games in HTML and Javascript, I tried to create a mini puzzle with the block and the fitting place where it will be placed.

function parseNumber(num) {
return parseFloat(num.replace(/[^\d]/)) || 0;
}
var movePopUp = (function() {
var startX;
var startY;
var currentPopUp = null;
var currentWidth = 0;
var currentHeight = 0;
var currentLeft = 0;
var currentTop = 0;
var callMoveOnPopUp = null;
var callMoveStopPopUp = null;
var contentMove = '.popup .title';
var move = false;
var marginStop = 30;
var maxWidth = window.innerWidth - marginStop;
var maxHeight = window.innerHeight - marginStop;
jQuery(contentMove).on('mousedown', function(e) {
    currentPopUp = this.parentNode.parentNode;
    currentLeft = parseNumber(currentPopUp.style.left);
    currentTop = parseNumber(currentPopUp.style.top);
    startX = e.clientX;
    startY = e.clientY;
    if (typeof(callMoveOnPopUp) == 'function')
        callMoveOnPopUp(currentPopUp);
    move = true;
});
jQuery(document).on('mouseup', function() {
    if (currentPopUp == null) return;
    if (typeof(callMoveStopPopUp) == 'function')
        callMoveStopPopUp(currentPopUp);
    currentPopUp = null;
    move = false;
})
jQuery(document).on('mousemove', function(e) {
    if (move == true) {
        var newX = currentLeft + e.clientX - startX;
        var newY = currentTop + e.clientY - startY;
        if (marginStop > e.clientX) return;
        if (marginStop > e.clientY) return;
        if (maxWidth < e.clientX) return;
        if (maxHeight < e.clientY) return;
        jQuery(currentPopUp).css({
            'left': newX,
            'top': newY,
        });
    }
});
return function(func1, func2) {
    callMoveOnPopUp = func1;
    callMoveStopPopUp = func2;
}
})();

.popup{
    position : fixed;
    width : 200px; /*LARGURA DO CAMPO*/
    height : 200px; /*ALTURA DO CAMPO*/
    border : 1px solid #000;
}
.popup:hover{
    border : 2px solid #000;
}
.popup .title{
  width: 260px; /*LARGURA DO CAMPO*/
  margin: 5px;
  cursor : move;
}
#texto1{
  color: black;
  height: 185px; /*ALTURA DO CAMPO*/
  line-height: 185px;
  background-color: transparent;
  text-align: center;
  width: 71.5%;
}
#encaixe{
	background-color: lightgray;
    width : 200px; /*LARGURA DO CAMPO*/
    height : 200px; /*ALTURA DO CAMPO*/
    margin-top: 50%;
    margin-left: 50%;
    text-align: center;
    line-height: 20px;
}
#encaixe:hover{
	background-color: gray;
}
h3{
  font-size: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup" style="top:50px; left:50px;" value="bloco">
    <div>
      <div class="title">
        <div id="texto1">
          BLOCO
        </div>
      </div>
    </div>
    <div class="popup_body">
    </div>
  </div>
  <div id="encaixe">
  	<br><br><br>encaixar bloco aqui<hr>
    obs. quando ele for encaixado aqui, seu valor será alterado via JavaScript;
  </div>

Only this way, I wanted that block at the time of the fixed fit inside the div, change its value (value) by means of a jQuery function or by Javascript itself.

Which method would be more practical and logical to put this block inside the socket and also to change its value when it was inside it automatically?