Questions tagged [interactjs]
26 questions
2
votes
1 answer
Drag 'n Drop Events firing multiple times
I am working on a webapp with drag 'n drop functionality.
Up to now I used basic HTML5 Dragging but now I switched to using the library interact.js.
I don't know if my problem is specific to this library or of more general kind:
Events when…
![](../../users/profiles/13533641.webp)
NotARobot
- 195
- 1
- 13
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…
![](../../users/profiles/4488843.webp)
toddash
- 127
- 14
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…
![](../../users/profiles/12304540.webp)
Freddie Mercury
- 53
- 1
- 4
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…
![](../../users/profiles/993851.webp)
bluelemonade
- 549
- 6
- 17
1
vote
1 answer
using the injectable service in end callback function with interactJS
I'm using interactJS with angular to make it possible for the user to perform a drag and drop of the elements with the class 'draggable'. Everything worked fine until I needed to use the injected service of the component in in the callback function…
![](../../users/profiles/6034966.webp)
Ilyes GHOMRANI
- 112
- 14
1
vote
1 answer
Can't drag and drop to another div using interact.js
Html/css newbie here,
I am using interact.js to attain a certain UI where I can drop items from a list into a drop zone. The problem is my list can grow very long and I need to add scroll to the list, and when I try to do so I have create a 'div'…
![](../../users/profiles/6557958.webp)
Yudhishthir Singh
- 1,842
- 1
- 10
- 27
1
vote
0 answers
Interact.js clone on drag (in vue component)
I am building a drag'n drop application with vue, so there are multiple boards and some cards which can be dragged to these boards.
I included interact.js for dragging which works fine but now I am unsure how to implement a clone on drag.
Right now…
![](../../users/profiles/13533641.webp)
NotARobot
- 195
- 1
- 13
0
votes
0 answers
pinch problem in interactjs when touching the background
i have a problem with interactjs.
somehow I don't get the ignorefrom and allowFrom properties with the gestures.
the left card can be rotated, the right one cannot, just a small difference with the allowFrom. why?
but it is even more problematic if…
![](../../users/profiles/993851.webp)
bluelemonade
- 549
- 6
- 17
0
votes
0 answers
Dropzone script (limited to dropzone and initial pos when dropped)
Basically what I need is a dropzone script, where the items that I can drag are only dropable in dropzone, if not they need to return to initial position. If I drop an item into dropzone and then remove it, it should go back to starting position.…
![](../../users/profiles/15620741.webp)
Shaman
- 1
- 1
0
votes
0 answers
Interact.js dropzone event doesn't trigger
I want to use interact js to drag and drop divs and drop these into a dropzone
I managed to get the drag element working, but the drop zone events seems odd : only the 'ondrop' listener seems to trigger.
I got:
interact('.drop_zone').dropzone({
//…
![](../../users/profiles/7334912.webp)
Felox
- 285
- 2
- 6
- 15
0
votes
0 answers
interact.js: Get position of rectangle instead of mouse
I'm using interact.js with its draggable function inside a div container and restricting the interaction. The box I'm dragging around is .interact-box.
![](../../users/profiles/5620626.webp)
Kheber
- 109
- 1
- 7
0
votes
0 answers
leaflet map drag direction problem in rotated div
I have a leaflet map that I can rotate freely within a div via interactjs.
Now the following happens, when I have rotated the map by 180 ° the drag movements on the map are exactly opposite. Is there any way to get around that?
![](../../users/profiles/993851.webp)
bluelemonade
- 549
- 6
- 17
0
votes
0 answers
interactjs pass dragevent to lower zIndex
I have an area within an interactjs draggable element that is not draggable.
I have defined this area with ignorefrom, works well so far.
interact ('#' + self.idName) .draggable ({
ignoreFrom: '.nodrag1, .nodrag2,
onstart:…
![](../../users/profiles/993851.webp)
bluelemonade
- 549
- 6
- 17
0
votes
0 answers
Interactjs issues when i try to invert an image
I have 3 buttons, one to rotate, another to resize and the last to drag. Everything for one image.
Now with this image what I want is to design another button so that it inverts a mirror effect, it works well when I give it using this…
![](../../users/profiles/15290300.webp)
eddyhg
- 13
- 3
0
votes
0 answers
Get closest edge of a stationary element relative to a dragged onto object
I am creating a drag and drop planner with angular and interactjs. I am able to recognize collisions between two draggable items and i would like to snap the item dragged onto to the closest edge of the stationary item.
How do I check what edge of…
![](../../users/profiles/13465444.webp)
Lars A.
- 3
- 2