What is snap relative to ? #1
Comments
Yep. That's how all the settings (should) work.
Snap coordinates are relative to the top-left of the page. If you want to change this you can use the For example, I used it in a post on path snapping To keep all coordinates relative to the canvas' top-left corners - https://github.com/taye/blog/blob/gh-pages/js/ijs-demo.js#L122-L135. Now that I think about it, it would probably be convenient to allow an Element to be passed to
I'm glad to hear that you like it. Let me know if you need any more info. |
|
Thank you for your answer taye. I did not digg into the code too much, but seeing how my DOM nodes (I'm using interact with the DOM) are positioned when using Thanks for the example, it may be useful. I'll let you know if I need more info, and I'm going back to have some fun with interact.js ! |
|
I'm not sure of what you mean. Could you give a sample of the code you're using if you still would like some help? |
|
Here we go, this is a sample I made to show you what I mean. <!DOCTYPE html>
<html>
<head>
<title>Interact demo</title>
<script type="text/javascript" src="interact.js"></script>
<style>
#container {
margin-top: 100px;
margin-left: 50%;
padding: 30px;
height: 300px;
position: relative;
border: 1px solid blue;
}
.draggable {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="container">
<div class="draggable">Drag me</div>
</div>
<a id="switch">position:relative</a>
<script type="text/javascript">
interact('.draggable')
.snap({
mode: 'anchor',
anchors: [
{x: 0, y: 0},
{x: 20, y: 0},
{x: 40, y: 0},
{x: 60, y: 0},
{x: 0, y: 10},
{x: 20, y: 10},
{x: 40, y: 10},
{x: 60, y: 10}
],
range: 10
})
.draggable({
onmove: function(event) {
event.target.style.left = event.snap.x + "px";
event.target.style.top = event.snap.y + "px";
}
});
var relative = true;
document.getElementById('switch').onclick = function() {
if (relative) {
this.innerHTML = 'position:static';
document.getElementById('container').style.position = 'static';
}
else {
this.innerHTML = 'position:relative';
document.getElementById('container').style.position = 'relative';
}
relative = !relative;
};
</script>
</body>
</html> |
|
Aah, thank you. I understand now. You're right; the styles of the element and it's parent aren't considered by interact.js. In this case it still gives you the position relative to the top-left of the page even though the element is being position relative to it's parent. You would have to set the var container = document.getElementById('container');
interact('.draggable').origin({
x: container.offsetLeft,
y: container.offsetTop
}); |
|
Also, you should probably use
|
|
Ok, thanks for the tips ! Did not get that pageX/Y would snap too. |
|
Something I don't understand is that when using |
|
Sorry, my mistake, I was using event.snap ! |
|
Snapping can now be relative to different points on the target element. See #133 and http://interactjs.io/docs/snapping/#relativepoints. |
I do not understand to what element snap coordinates are relative.
There are 2 ways to define snap : By directly setting interact.snap or interact(element).snap. Does the first one sets a global snap, whereas the second one sets the snap for the element ? (I guess so).
When setting a snap, we can set "x" and "y" coordinates for each point, but are these coordinates relative to the document ? To the first positioned parent from the element ? To the element itself ?
Thanks for your help, interact.js is a really good work, doing just what it should.
The text was updated successfully, but these errors were encountered: