Question

我正在尝试创建一个可以在移动设备上运行的图像裁剪器;一个大图像包含在一个容器元素内，用于裁剪它，用户可以将图像拖动到这个容器内并捏缩放。

拖动功能适用于桌面浏览器但是当我在移动浏览器（android chrome，android互联网浏览器，iphone safari）上测试时，它无法正常工作：它不流畅或根本不拖动。当试图滑动或触摸移动时，它只移动一小部分微小的位。

使用touch，touchstart，touchmove进行了一些测试而没有太多运气：

我在以下链接（http://jsbin.com/cokil/1/）中有一个演示。不确定我是否可以获得有关如何执行此操作的一些提示或建议？

据报道，原始的github链接没有加载hammerjs（这里正在加载），所以我从CDN http://jsbin.com/cokil/3/
请记住，问题出在移动浏览器上

感谢您的期待！

Answer 1

您的jsbin未正确包含Hammer js。替换：

https://raw.github.com/EightMedia/hammer.js/master/hammer.min.js

带

//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js

你的脚本运行正常。

脚本中不需要jQuery。如果您愿意，可以使用原生DOMContentLoaded并删除$(document).ready。

您还需要将'px'添加到顶部和左侧声明的末尾

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

<强> DEMO

Answer 2

经过深入研究，听取其他人对此的看法，并试图保持简单，我提出了以下解决方案，希望对未来的其他人有用：

        document.addEventListener('touchstart', function(event) {
             event.preventDefault();
             var e = new Event('dragstart'); 
             element.dispatchEvent(e);
        }, false);

        document.addEventListener('touchmove', function(event) {
            event.preventDefault();
            var e = new Event('drag'); 
            element.dispatchEvent(e);
        }, false);

这可以通过触发适用于桌面的原始代码来实现：

        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);
            imgEl.style.left = x + parseFloat(event.gesture.deltaX);

        });

如何在移动浏览器上拖动元素？

2 个答案: