如何将触摸事件转换为鼠标拖动事件

Question

在实现触摸设备图像的拖放式磁盘时，我将触摸事件转换为鼠标事件时遇到了问题。事件没有被派遣或不如可比。我使用了此指南并学习了其他答案。

为了最大程度地减少问题，我只会缩小到拖放事件，而无需下降。希望如果解决问题，另一部分也将得到解决。当我用鼠标拖动图像时，我会得到所需的行为 - 幽灵映像和更改的光标：

我需要拥有当设备上的触摸时相同的幽灵图像，但没有运气：

为了实现所需的行为，我尝试发生触摸事件时模拟鼠标事件。

<img id="hammer" src="https://i.sstatic.net/9oV2e.png" />

<script>
var hammer = document.getElementById("hammer");

hammer.addEventListener("touchstart", touchHandler, true);
hammer.addEventListener("touchmove", touchHandler, true);

function touchHandler(event) {
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    switch(event.type) {
        case "touchstart": type = "dragstart"; break;
        case "touchmove":  type = "drag";      break;        
        default:           return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                  first.screenX, first.screenY, 
                                  first.clientX, first.clientY, false, 
                                  false, false, false, 0/*left*/, first.target);
    
    this.dispatchEvent(simulatedEvent);
    event.preventDefault();
}
</script>

fiddle

看来，触摸事件似乎没有转换为拖放事件。我该如何实现？如果我将EventListeners添加到文档而不是Hammer，则会遇到错误。如果我用容器div将hammer 包装，然后将AddEventListener包装到容器中，则也不会成功。如果我将type =“ drag”更改为 type =“ mousemove”，则没有区别。