Drag Even and Pointer event

by Souymodip

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.js"></script>
<div id="one" style="border: 1px solid black; text-align: center;">One</div>
<div id="two" style="border: 1px solid black; text-align: center;">Two</div>

Canvas
<div id="canvas" draggable="true" ondragstart="dragStart(event)" ondragover="dragOver(event)" ondragend="dragEnd(event)" onpointerdown="pointerDown(event)" onpointermove="pointerMove(event)">
Drag Me
</div>

<hr style="width:50%;text-align:left;margin-left:0">
Output Console
<hr style="width:50%;text-align:left;margin-left:0">
<div id="output"> </div>

CSS

#div1 {
  width: 350px;
  height: 50px;
  padding: 10px;
  border: 2px solid #aaaaaa;
}

#canvas {
  width: 720px;
  height: 200px;
  padding: 10px;
  border: 2px solid #aaaaaa;
}

JavaScript

function consoleLog(text) {
	document.getElementById('output').innerHTML = text
}

function consoleLogConcat(text) {
	document.getElementById('output').innerHTML += text
}


let canvas = document.getElementById('canvas')


function createTapEventDic(event) {
	var obj = {"pointers":[{"isTrusted":true}],"changedPointers":[{"isTrusted":true}],"pointerType":"mouse","srcEvent":{"isTrusted":true},"isFirst":false,"isFinal":true,"eventType":4,"center":{"x":event.clientX,"y":event.clientY},"timeStamp":event.timeStamp,"deltaTime":115,"angle":0,"distance":0,"deltaX":0,"deltaY":0,"offsetDirection":1,"scale":1,"rotation":0,"velocity":0,"velocityX":0,"velocityY":0,"direction":1,"target":{},"tapCount":1,"type":"tap"}
  return obj
}

function createPointerDown(dragevent) {

	var pointerDownEvent = new PointerEvent("pointerdown",
  {pointerId: 1,
    bubbles: true,
    cancelable: true,
    pointerType: "touch",
    width: 100,
    height: 100,
    isPrimary: true
  });
  return pointerDownEvent;
}

function createPointerMove(event) {
	var pointerMove = new PointerEvent("pointermove", 
  { pointerId: 1,
    bubbles: true,
    cancelable: true,
    pointerType: "touch",
    width: 100,
    height: 100,
    isPrimary: true,
    altKey:event.altKey,
    button:event.button,
    buttons:event.buttons,
    clientX:event.clientX,
    clientY:event.clientY,
    ctrlKey:event.ctrlKey,
    metaKey:event.metaKey,
    movementX:event.movementX,
    movementY:event.movementY,
    offsetX:event.offsetX,
    offsetY:event.offsetY,
    pageX:event.pageX,
    pageY:event.pageY,
    region:event.region,
    relatedTarget:event.relatedTarget,
    screenX:event.screenX,
    screenY:event.screenY,
    shiftKey:event.shiftKey,
    mozPressure:event.mozPressure,
    mozInputSource:event.mozInputSource,
    webkitForce:event.webkitForce,
    x:event.x,
    y:event.y
  });
  return pointerMove;
} 


var buttonOne = document.getElementById("one");
var buttonTwo = document.getElementById("two");

var mc1...