Драгула получает сенсорное событие от HammerJS? - PullRequest
Новая
       8

Драгула получает сенсорное событие от HammerJS?

0 голосов
/ 22 декабря 2018

Я хотел бы объединить Dragula с HammerJS так, чтобы перетаскивание происходило только в Dragula после события прессы в HammerJS.С текущим кодом пользователь должен поднять палец и снова прикоснуться к событию перетаскивания, чтобы начать происходить.

Есть ли способ, когда событие перетаскивания происходит после долгого касания без поднятия пальцев?

В настоящее время у меня глобальная переменная, называемая touch.Пока Touch имеет значение true, события перетаскивания Dragula возвращаются.Я установил HammerJS, чтобы сделать переменную касания ложной, а затем позволил событию касания 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>

Есть ли способ инициировать событие касания dragula из события HammerJS?

...