{"action":"created","issue":{"url":"https://api.github.com/repos/taye/interact.js/issues/79","labels_url":"https://api.github.com/repos/taye/interact.js/issues/79/labels{/name}","comments_url":"https://api.github.com/repos/taye/interact.js/issues/79/comments","events_url":"https://api.github.com/repos/taye/interact.js/issues/79/events","html_url":"https://github.com/taye/interact.js/issues/79","id":43339131,"number":79,"title":"Snap to dropzone?","user":{"login":"eminos","id":1682784,"avatar_url":"https://avatars.githubusercontent.com/u/1682784?v=3","gravatar_id":"","url":"https://api.github.com/users/eminos","html_url":"https://github.com/eminos","followers_url":"https://api.github.com/users/eminos/followers","following_url":"https://api.github.com/users/eminos/following{/other_user}","gists_url":"https://api.github.com/users/eminos/gists{/gist_id}","starred_url":"https://api.github.com/users/eminos/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/eminos/subscriptions","organizations_url":"https://api.github.com/users/eminos/orgs","repos_url":"https://api.github.com/users/eminos/repos","events_url":"https://api.github.com/users/eminos/events{/privacy}","received_events_url":"https://api.github.com/users/eminos/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":13,"created_at":"2014-09-21T16:33:17Z","updated_at":"2015-03-03T00:51:22Z","closed_at":"2014-10-11T14:15:18Z","body":"Hello,\r\n\r\nI'm sorry this is not a bug, just a question. I'm not sure where to ask this...\r\n\r\nI'm building a little \"product builder tool\" for a client, using interact.js. I just started testing it, hoping I can have all the functions I need with it.\r\n\r\nI have a bunch of dropzones, letting dragable boxes be able to be dropped on these dropzones. The boxes should be snapped/centered (with animation) when dropped onto the dropzone.\r\nAnd also the \"element origin\" should be centered to the dragable box, so that the dropzone gets active once the center of the dragable box is on the drop zone, and not the cursor (as now).\r\n\r\nAre these two things possible to achieve with intereact.js?\r\n\r\nHave a look here to see what I'm trying to do:\r\nhttp://kundprojekt.soonce.com/lintex/zonbuilder/"},"comment":{"url":"https://api.github.com/repos/taye/interact.js/issues/comments/76864582","html_url":"https://github.com/taye/interact.js/issues/79#issuecomment-76864582","issue_url":"https://api.github.com/repos/taye/interact.js/issues/79","id":76864582,"user":{"login":"taye","id":1679746,"avatar_url":"https://avatars.githubusercontent.com/u/1679746?v=3","gravatar_id":"","url":"https://api.github.com/users/taye","html_url":"https://github.com/taye","followers_url":"https://api.github.com/users/taye/followers","following_url":"https://api.github.com/users/taye/following{/other_user}","gists_url":"https://api.github.com/users/taye/gists{/gist_id}","starred_url":"https://api.github.com/users/taye/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/taye/subscriptions","organizations_url":"https://api.github.com/users/taye/orgs","repos_url":"https://api.github.com/users/taye/repos","events_url":"https://api.github.com/users/taye/events{/privacy}","received_events_url":"https://api.github.com/users/taye/received_events","type":"User","site_admin":false},"created_at":"2015-03-03T00:51:21Z","updated_at":"2015-03-03T00:51:21Z","body":">The first bit of code you provided seems to be working\r\n>When I try to convert this based on the docs, it doesn't seem to be working, however I'm probably implementing it incorrectly\r\n>I don't see the anchors method listed in the snapping docs, so I guess just looking for clarification there.\r\n\r\nI've kept the old  `interactable.snap(...)` API working so you can use anchors with it for now. It will eventually be removed. With the [new API][unify-snap], there's no snap `mode` and snapping is set for dragging and resizing separately. All snap targets (\"anchors\", grids or functions) go in the same `targets` array.\r\n\r\n```javascript\r\n// call the draggable method of the Interactable\r\n// and give the snap options in the options object\r\ninteract(target).draggable({\r\n  snap: {\r\n    targets: [\r\n      { x: 0, y: 0 },                                       // anchor\r\n      interact.createSnapGrid({ x: 25, y: 25 }),            // grid\r\n      function (x, y) { return { x: x % 50, y: y % 50 }; }  // path function\r\n    ],\r\n    relativePoints: [ { x: 0.5, y: 0.5 } ]                  // instead of elementOrigin\r\n    // other snap settings...\r\n  }\r\n});\r\n```\r\n\r\n>Also, when the draggable element snaps to the center of the droppable element, it's not always in the center. Sometimes it is, but it usually offsets itself by around 10px or so in any given direction if I re-drop it.\r\n\r\n`elementOrigin` has been replaced by the [`relativePoints`][snap-relative] array in the new API.\r\n\r\n>Also, another issue is that when I set one of the snap points using the `ondragenter` method, it's automatically set for all of the rest of the draggable elements.\r\n>Example, when I drag one element over a droppable zone, it snaps to it (expected).\r\nIf I take another draggable element and move it barely from its start position, it snaps to the same location as the previously dragged element.\r\n\r\nYou need to store the starting position of each element. The code that I provided is only meant for one element.\r\n\r\nI've forked your demo and fixed the snapping API usage so it should be a little easier to implement the rest of what you need: https://codepen.io/taye/pen/PwBPwb. Let me know if you'd like any more help :).\r\n\r\n[unify-snap]: https://github.com/taye/interact.js/pull/127\r\n[snap-relative]: https://github.com/taye/interact.js/pull/133"}}