JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div class="droppable_div" >
  <div id="part_type_div1" class="part_type_div">
    <div id="dic">
    </div>
  </div>
</div>
<div class="droppable_div" >

</div>
</div>

CSS

.droppable_div {
  width:200px;
  height:200px;
  border: 1px solid #ff0000;
}
.part_type_div {
  top: 2px;
  left:2px;
  width:190px;
  height:190px;
  border: 1px solid #0000ff;
}
#dic {
    left:5px;
    top: 5px;
    width: 50px;
    height: 50px;
    border: 1px solid #000;
}

JavaScript

alert("hoge");


/*var delta = {
	stX: null, 
  stY: null, 
  enX: null, 
  enY: null
};*/
var delta = {};

function calcDistance(loc) {
    var x1 = loc.stX;
    var x2 = loc.enX;
    var y1 = loc.stY;
    var y2 = loc.enY;
　　var a, b, d;

　　a = x1 - x2;
　　b = y1 - y2;
  return Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
}
var dic1 = document.getElementById("dic");
dic1.onmousedown = function(e) {
    var key = (this).parentNode.id;
        
    delta = {};
		delta[key] = {};
    delta[key].isStarted = true;
    delta[key].stX = e.pageX;
    delta[key].stY = e.pageY;
    delta[key].enX = e.pageX;
    delta[key].enY = e.pageY;
};
dic1.onmouseup = function(e) {    
    var key = (this).parentNode.id;

    if (key in delta && 
        delta[key].isStarted == true) {
        
        console.log("parentNode.id="+(this).parentNode.id);
        var msg = "distance(" + delta[key].stX + "," + delta[key].stY + "," + delta[key].enX + "," + delta[key].enY + ") = " + calcDistance(delta[key]);
    				console.log(msg);        

				if(calcDistance(delta[key]) < 5) {
						console.log("click!!");
        }else {
        		console.log("oh...");
        }
		}
    delta = {};
};

dic1.onmousemove = function(e) {
    var key = (this).parentNode.id;
        
    if (key in delta && 
        delta[key].isStarted == true) {
        
    		delta[key].enX = e.pageX;
    		delta[key].enY = e.pageY;
        console.log("move!!");    
    }     
};

$("#part_type_div1").draggable(
  {
    snap: ".droppable_div",
  snapMode: "inner",
  handle: "div",
  containment: 'parent',
  scroll: false,
    grid: [1, 2],
    revert: function () {
      return false;
    },
    stop: function (event, ui) {
    	event.preventDefault();
    },
});
$("#part_type_div1").on("dragstart", function (ev) {});