时间戳

首页 > 解决方案 > Dragula 从 HammerJS 接收触摸事件？

javascript - Dragula 从 HammerJS 接收触摸事件？

问题描述

我想将 Dragula 与 HammerJS 结合起来，在 HammerJS 中的新闻事件之后，拖动只发生在 Dragula 中。使用当前代码，用户必须抬起手指并再次触摸拖动事件才能开始发生。

有没有办法在没有抬起手指的情况下长时间触摸后发生拖动事件？

目前我有一个名为 touch 的全局变量。只要 Touch 为真，就会返回 Dragula 拖动事件。我将 HammerJS 设置为使 touch 变量为 false，然后让 dragula 触摸事件发生。问题是它需要用户再次触摸屏幕才能发生 Dragula 触摸事件。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dragula.min.css">
<style>
body div {
    height: 50px;
    width: 50px;
    background-color: burlywood;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<div>Fifth</div>

<script src="dragula.min.js"></script>
<script src="hammer.min.js"></script>
<script>
var touch = true;
var scrol;
var subjs = document.querySelectorAll("body div");
subjs.forEach(function (entry) {
    hammer = new Hammer(entry, {dragLockToAxis: true, dragBlockHorizontal: true}),
    hammer.on('press', function(e){
        touch = false;
        e.target.classList.add("dragging");
        document.querySelector('body div').addEventListener('touchmove', function(e) {
            e.preventDefault();
            console.log(e.changedTouches[0].clientY);
            if (e.changedTouches[0].clientY < 80) {
                if (scrol == undefined) {
                    scrol = setInterval(view.pageScroll,100); 
                }
            } else if (e.changedTouches[0].clientY > 80 && e.changedTouches[0].clientY < (window.screen.height - 80)) {
                console.log(scrol)
                clearInterval(scrol);
                scrol = undefined;
            } else if (e.changedTouches[0].clientY > (window.screen.height - 80)) {
                if (scrol == undefined) {
                    scrol = setInterval(view.pageScrollDown,100); 
                }
            }
        });
    });
});
drake = dragula([document.querySelector('body')],{invalid: function (el, handle) {
    return touch; // don't prevent any drags from initiating by default
}}); 
drake.on("drop",function(el, target, source, sibling){
    clearInterval(scrol);
});
drake.on("dragend",function(el){
    touch = true;
    el.classList.remove('dragging')
});
var list = document.querySelector('body').children;
for (var i = 0; i < list.length; i++) {
    list[i].addEventListener('click', function(){
        if (touch == true) {
            drake.destroy();
        }
    });
}
</script>
</body>
</html>

有没有办法从 HammerJS 事件启动 Dragula 触摸事件？

标签： javascripthammer.jsdragula

解决方案

推荐阅读