Questions tagged [interact.js]

interact.js is a standalone javascript module for handling single-pointer and multi-touch drags and gestures.

interact.js

interact.js is a standalone module for handling single-pointer and multi-touch drags and gestures.

Useful Links

115 questions
2
votes
1 answer

Clone-on-drag with aurealia-interactjs

I'm trying to use interactjs with aurelia to have a system where dragging clones the dragged object, rather than moves it. According to the interactjs FAQ (http://interactjs.io/docs/faq/#clone-target-draggable), this can be done using the move…
Andrew Hows
  • 1,309
  • 9
  • 15
2
votes
0 answers

How to dynamically add a div using interact.js and then fill it with values via angular.js

I am trying to add a new div dynamically using interact.js and then fill it with values using angular.js. I add the div in the js code line 67-80 in the function: oninertiastart However, the output is simply {{vals['pressure']}} (i have tried to…
gedemagt
  • 647
  • 1
  • 8
  • 20
2
votes
5 answers

Get Position of Element in Javascript

I am trying to get the position of an element dropped onto the canvas using the following code. var x = $(".partitiondrop").position(); alert("Top position: " + x.top + "\nLeft position: " + x.left); The above works fine. I would like to know if I…
Nayantara Jeyaraj
  • 2,406
  • 5
  • 30
  • 55
2
votes
1 answer

Position an element using X and Y coordinates

I'm very new to Javascript and I am using InteractJS to make a simple drag and drop of dragging smaller images onto a bigger image. On every drag move event they use the following function: function dragMoveListener (event) { var target =…
unconditionalcoder
  • 673
  • 1
  • 10
  • 24
2
votes
0 answers

interact.js cannot drag an object tag SVG

I was trying to move a svg object by drag/drop/scale/rotate and touch functionality. My SVG is enclosed in tag which it seems to be not working fine with the interact.js. I had coded the test whereby an in-line SVG can be…
2
votes
1 answer

How to Drag, Drop and Clone an object using interact.js

I'm have trouble with cloning an object using interact.js. I can do drag and drop, but there is no way to get clone from the objects. I put here drag and drop code. Can someone modify it to clone objects? #drag-1, #drag-2 { width: 20%; …
2
votes
1 answer

interact js with guide line

Interact.js has a snap option to snapping element. But I don't know how to show those guide lines. I was thinking about there might be some events trggered when snapping happened, and I might use them to show those lines, but I didn't find them in…
Chef
  • 543
  • 3
  • 16
2
votes
1 answer

Add Custom right click in interact.js drag items

I would to add custom right click "Send to Front" and "Send to back" in the draggable items. HTML

You can drag one element

with each pointer…

kabeer rifaye
  • 307
  • 1
  • 3
  • 16
2
votes
1 answer

Manually trigger onmove in interact.js

I add / delete with jquery onto / from the set of class="draggable" elements i am using with interactjs. When i add some new elements with specific positions, like:

They don't appear at the correct…

user1648409
1
vote
1 answer

InteractJs - Dynamic Snapping of draggable items to guideline in parent div

In the below fiddle I have interact Js to snap the children element to a certain point. But I am having trouble snapping all sides of the blue div to snap to center and x & y axis of the parent div. JsFiddle: https://jsfiddle.net/n3wLb5vp/1/ Below…
toddash
  • 127
  • 14
1
vote
0 answers

How to access different resources of floorplan and save position of each resource in database

I am having an image of a floorplan like this There are two things which I am looking I am having the record in my database which tells the occupancy of each cabin or seat, whether it's occupied or not. So, I just want to reflect the occupancy of…
Abhishek Tripathi
  • 1,344
  • 3
  • 18
  • 29
1
vote
0 answers

Why is a vue js div changing position on an interact.js grid?

I'm using interact js and calculations to try to save a representation of a room on a blueprint and return it to the same relative place on the grid when the blueprint is reloaded. On floor reload, however, the interact js object moves at a…
1
vote
1 answer

multiple vertical scrollable divs on multitouch problem

i try to scroll 2 text fields vertically on a multitouch application, each one works for itself, but as soon as i try to scroll both, only the one touched first works. is there a workaround here? maybe an example of a custom scroller? here's a…
1
vote
1 answer

How to move elements from one div to another without resetting to original position? (interact.js)

I am using interact.js and am trying to separate the elements into two divs (toolbox and matrix to be solved). However when I attempt to implement this, if the elements and the matrix are not in the same div then the elements go back to the original…
1
vote
0 answers

interactjs drag stops after few events

I just had a heavy problems with a vue cli project with interactjs the latest version is installed "interactjs": "^ 1.10.3", I use in vue https://github.com/kimuraz/vue-interact Now I have the following problem, in a dummy project I have a component…
bluelemonade
  • 549
  • 6
  • 17