I have one draggable element inside container and restricted to its bounds. I use InteractJs to implement this. Draggable element is hidden by default and becomes visible as touch starts.
However I want to make the draggable element to follow the cursor/touch position of the user so that it can appear right under the position of the first users click/touch and then follow it while drag/touchmove and dissapear on touchend.
Could you please advise how can I modify my code to reach such behavior? I've tried to apply the transform style property with the coordinates of touchstart but no luck.
Example: https://codepen.io/moogeek/pen/oNQWwaN
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.17/interact.min.js"></script>
<style>
body{padding-top:100px;}
.container {
width:368px;
height:120px;
background-color:red;
margin:0 auto;
z-index:2
}
.draggable {
visibility:hidden;
height:60px;
width:80px;
background-color:#fff;
display:inline-block;
touch-action:none;
z-index:1;
}
</style>
</head>
<body>
<div class="container">
<div class="draggable"></div>
</div>
</body>
</html>
js:
let dragMoveListener=(event) => {
let draggable=document.getElementsByClassName("draggable")[0],
target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
draggable.style.visibility='visible';
target.style.backgroundPosition=x + 'px ' + y + 'px';
target.style.webkitTransform = target.style.transform
= 'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
let draggables=document.querySelectorAll(".draggable"),
containers=document.querySelectorAll(".container");
containers.forEach(function(element){
interact(element).on("tap down",function(e){
var wt=element.querySelector('.draggable');
var wect=wt.getBoundingClientRect();
wt.style.visibility='visible';
});
});
draggables.forEach(function(element){
interact(element)
.on("dragstart",function(e){
var x=element.getAttribute("data-x");
var y=element.getAttribute("data-y");
if(x!=null && y!=null){
//draggable.webkitTransform = draggable.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
}
}).
on("dragmove",function(e){
})
.on("dragend",function(e){
element.style.visibility='hidden';
//draggable.webkitTransform = draggable.style.transform = 'translate(0px, 0px)';
}).draggable({
onmove: dragMoveListener,
modifiers: [
interact.modifiers.restrict({
restriction: 'parent',
endOnly: false
})
]})
});
from How to make draggable element follow cursor on touchmove coords with InteractJs
No comments:
Post a Comment