JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="div1"></div>
<p id="p1">some text</p>

CSS

#div1{
  position : absolute ;
  top : 10px ;
  left : 20px ;
  background : black ;
  width : 200px ;
  height : 200px ;
  cursor : move ;
}
#p1{
  position : absolute ;
  top : 100px ;
  left : 200px ;
  color : blue ;
}

.blue{
  color: blue;
}
.orange{
  color: orange;
}

JavaScript

$(document).ready(function(){
	
  var boxLeftX;
  var boxLeftY;

	$("#div1").draggable({
  	drag: function(){
            var offset = $(this).offset();
            boxLeftX = offset.left;
            boxLeftY = offset.top;
        }
  });
  
  var $source = $('#p1');
  var characters = $source.html();
  var sourceLength = characters.length;
  var replacement = "";
  
  for(var i = 0 ; i < sourceLength ; ++i){
  	replacement += "<span class='interesting'>" + characters[i] + "</span>";
  }
  
  $source.html(replacement);
  
  var positionsStore = [];
  var positionOfPara = $('#p1').position();
  
  $('.interesting').each(function(index, element){
  	var tempObj = {};
    var tempPos = $(element).position();
    tempObj.x = Number(tempPos.left) + Number(positionOfPara.left);
    tempObj.y = tempPos.top + positionOfPara.top;
    tempObj.ele = element;
    
    positionsStore.push(tempObj);
   
  });
  
  
  
  $('#div1').on("mouseup", function(evt){
  	$.each(positionsStore, function(index, item){
    
    var boxX = $('#div1').position().left;
    var boxY = $('#div1').position().top;
   
    
    	if(checkIfCoordIsInBox(item,boxX, boxY)){
      	$(item.ele).removeClass("blue").addClass("orange");
      }else{
        $(item.ele).removeClass("orange").addClass("blue");
      }
    })
  
  });
  
  

});


function checkIfCoordIsInBox(charObj,x,y){
	console.log(charObj.x);
  console.log(charObj.y);
	if(((charObj.x - x) <= 200) && ((charObj.y - y) <= 200) && ( (charObj.x - x) >= 0)  && ((charObj.y - y) >= 0)){
  	 return true;
  }
  return false;
}