Драгула получает сенсорное событие от HammerJS?
Я хотел бы объединить 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>
Есть ли способ инициировать событие touch dragula из события HammerJS?