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

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

        });