如何在javascript中正确拖动元素？

我正在尝试创建一个图像裁剪器，它基于容器盒中的图像。用户应该能够拖动或移动图像，并通过按压进行缩放

目前，我一直在使用拖动功能，但我发现它不能正常工作。当从左上角拖动到右下角时，效果大致正常，但如果我尝试从左向右拖动或反向拖动，图像会一直反弹回初始拖动位置

我的代码非常基本，您可以看到我只需将deltaY/x添加到x或y中，这似乎就足够了

        var x = 0;
        var y = 0;
        var imgEl = document.querySelectorAll("img")[0];

        Hammer(element).on("dragstart", function(event) {
            imgEl = document.querySelectorAll("img")[0];

            y = parseFloat(imgEl.style.top) || 0;
            x = parseFloat(imgEl.style.top) || 0;
        });

        Hammer(element).on("drag", function(event) {

            imgEl.style.top = (y + parseFloat(event.gesture.deltaY))+'px';
            imgEl.style.left = (x + parseFloat(event.gesture.deltaX))+'px';

        });

我在这里有一个演示设置：

• 测试时，我注意到，当我从右下角拖动到左上角时，效果很好

---

谢谢你的关注

您需要向拖动变量添加新的鼠标位置。

哦，很抱歉耽误了你们的时间，我输入了一个错误：

        y = parseFloat(imgEl.style.top) || 0;
        x = parseFloat(imgEl.style.top) || 0;

应该是：

        y = parseFloat(imgEl.style.top) || 0;
        x = parseFloat(imgEl.style.left) || 0;

---

谢谢你的关注！这不是我用x和y+event.signature.deltaX/y求和所做的吗？我来看看，谢谢。