Interactjs after converting resistance to css: hang no longer works
I just opened Interact.js and I managed to get it to work, but after dragging (with inertia enabled), the transform in my: hover no longer works. Cursor: The pointer is still working. Anyone can think of a solution?
CSS
.bubble:hover {
transform: scale(1.1);
cursor: pointer;
}
JS:
interact('.bubble').draggable({
inertia: {
resistance: 15,
minSpeed: 100,
endSpeed: 50
},
onmove: function(e) {
var target = e.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + e.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + e.dy;
// translate the element
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);
}
}).on('tap', function(e) {
console.log('tapped');
e.preventDefault();
});
Check out the fiddle here: https://jsfiddle.net/82utnzbx
Thanks in advance!
source to share
This is due to the many transformations you apply to bubble
, i.e. due to interact.js
one applied transform
, which changes the x and y coordinates of the object (property tranlate
), and when you hover the other transform
is applied to the object scale
.
So, transform
in your javascript, overrides the value in css.
What you need to do is to combine the properties transform: translate()
and transform: scale()
in your javascript.
You can do this by using jquery.hover()
and adding an already existing property transform
with a static transform: scale()
one via this code:
$(".bubble").hover(function() {
document.getElementsByClassName("bubble")[0].style.transform += "scale(1.1)";
}, function() {
// For transformation when bubble has moved already
if (document.getElementsByClassName("bubble")[0].style.transform[0] != "s") {
document.getElementsByClassName("bubble")[0].style.transform = document.getElementsByClassName("bubble")[0].style.transform.split(")")[0];
} else {
// For transformation when bubble has not moved
document.getElementsByClassName("bubble")[0].style.transform = "";
}
});
I worked it out for you, see the code:
interact('.bubble').draggable({
inertia: {
resistance: 15,
minSpeed: 100,
endSpeed: 50
},
onmove: function(e) {
var target = e.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + e.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + e.dy;
// translate the element
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);
}
}).on('tap', function(e) {
console.log('tapped');
e.preventDefault();
});
$(".bubble").hover(function() {
document.getElementsByClassName("bubble")[0].style.transform += "scale(1.1)";
}, function() {
// For transformation when bubble has moved already
if (document.getElementsByClassName("bubble")[0].style.transform[0] != "s") {
document.getElementsByClassName("bubble")[0].style.transform = document.getElementsByClassName("bubble")[0].style.transform.split(")")[0];
} else {
// For transformation when bubble has not moved
document.getElementsByClassName("bubble")[0].style.transform = "";
}
});
* {
background-color: #7dd3f4;
}
.bubble {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1);
-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1);
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1);
width: 120px;
height: 120px;
transition: all .3s ease;
margin-top: 15px;
margin-bottom: 10px;
margin-left: 15px;
}
.bubble:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<div class="bubble"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
</body>
Or you can check out the updated fiddle here .
source to share