Question

我正在尝试创建一个图像裁剪器，它基于容器盒内的图像。用户应该能够拖动或移动图像并捏缩放。

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

我的代码非常基本，你可以看到我只是添加到x或y deltaY / X，我觉得这样就足够了吗？

        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';

        });

我在这里有一个演示设置：http://jsbin.com/kimes/4

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

感谢您的期待！

Answer 1

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

Answer 2

哦，对不起带你们的时间，我有一个错字：

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

应该是：

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

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

2 个答案: