Question

我正在尝试使用Hammer.js拖动div

var revcircle = document.getElementById('rev-circle');
var rc = new Hammer(revcircle);

rc.on("drag", function(event) {
event.preventDefault();
    alert('dragged');

});

rev-circle是我的div id。

<div class="mini-circles1" id="rev-circle" draggable="true">
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <br/><br/> John Campbell<br>President and CEO<br> Toranto Waterfront Revitalization Corportation</p>

</div>

我也包括了jquery ui。但它没有识别拖动功能。轻扫等工作正常。我使用的是锤版v2.0.4。

我在这里遗漏了什么吗？

Answer 1

在Hammer.js v2.0.x中，它似乎是“泛”而不是“拖”。

Answer 2

这肯定会在Android设备上使用Phonegap进行测试。只需包含最新的＆＃34; hammer.min.js＆＃34;归档到你的项目。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Droppable - Default functionality</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/hammer.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {


            var x = document.getElementById("x");
            var y = document.getElementById("y");

            var element = document.getElementById("hammerdrag");
            var hammertime = Hammer(element);


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

               // console.log(event);
                x.innerHTML = event.deltaX;
                y.innerHTML = event.deltaY;


                $("#hammerdrag").css('left', event.center.x);

                $("#hammerdrag").css('top', event.center.y);
            });

        });
    </script>

    <style type="text/css">
        #hammerdrag {
            position: absolute;
            top: 200px;
            left: 100px;
            width: 100px;
            height: 100px;
            background-color: blue;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div draggable="true" id="hammerdrag"></div>
    <span id="x"></span>
    <span id="y"></span>
</body>
</html>

在Hammer.js中启用拖动

2 个答案: