Question

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

有没有一种方法可以在长时间触摸后发生拖拽事件而不会松开手指？

目前，我有一个名为touch的全局变量。只要Touch为true，就会返回Dragula拖动事件。我将HammerJS设置为使touch变量为false，然后让dragula touch事件发生。问题在于，它需要用户再次触摸屏幕才能发生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 touch事件？

Dragula从HammerJS接收触摸事件吗？

0 个答案: