interact.js is a standalone javascript module for handling single-pointer and multi-touch drags and gestures.
interact.js
interact.js is a standalone javascript module for handling single-pointer and multi-touch drags and gestures.
Questions tagged [interact.js]
115 questions
26
votes
2 answers
Re-firing pointer events onto lower layer (for irregular-shaped dragging with interact.js)
I need to manually construct/fire a mousedown event in a way that can be handled by any relevant event handlers (either in straight JS, jQuery, or interact.js), just as a natural mousedown event would. However, the event does not seem to trigger…
Tim
- 370
- 2
- 9
14
votes
3 answers
Resizing a rotated item with javascript (interact.js)
I have spent many days trying to make an item resizable that is rotated with interact.js.
This is the code that I have at this moment, I will try to explain the concept.
We have a selector item for two reasons, because the container could be scaled…
chemitaxis
- 11,583
- 14
- 62
- 117
14
votes
2 answers
How to snap elements to other draggable elements using interact.js
I'm making a draggable elements using interactjs.io
I need implement exactly the same behaviour that jQuery UI snap. You can see an example here in the official documentation:
The behaviour is: snaps to all other draggable elements
In interactjs.io,…
chemitaxis
- 11,583
- 14
- 62
- 117
7
votes
1 answer
Integrating Interact.js with an Angular Project
I need to use the functionality provided by Interact.js, such as draggable, resizable and such, in an Angular project, but i can't find a solid way of importing it in typescript.
I've read about some work-arounds by defining it as a function, but i…
jimas13
- 106
- 2
- 10
7
votes
2 answers
Get ComponentRef from DOM element
It has already been answered how to get the DOM element from an Angular 2 component: ComponentRef.location.nativeElement (ComponentRef.location gives the ElementRef that gives a direct access to DOM).
But how to do the opposite, i.e. get the…
Antoine
- 1,161
- 1
- 11
- 17
6
votes
1 answer
Use dragula to move objects over canvas
I have a canvas with a background picture. I would like to have objects (buttons or divs) that can move over the canvas.
I have found the perfect solution with interact.js. The first example on the page (called Dragging) is exactly what I'd like to…
ncohen
- 6,184
- 19
- 61
- 112
5
votes
0 answers
How to restrict dropping draggable elements into a predefined div element?
I am using interact.js and I want to enable dropping of draggable objects inside a predefined div .dropzone, so that dropping outside .dropzone would be disabled. I introduced restriction: ".dropzone", drag: document.getElementById('dropzone'),,…
Dinosaurius
- 6,662
- 12
- 48
- 93
5
votes
1 answer
interact.js drag not working on chrome mobile emulator
I'm using interact.js to create a throwable element.
I'm trying to run a simple example and it runs fine in web mode, but when i emulate a mobile device the drag is not working properly (the element barely moves).
Here is a bin:…
Tomer
- 16,381
- 13
- 64
- 124
4
votes
1 answer
interact.js SVG rect snapping to a div with margins
In this jsFiddle I have an SVG interact.js rect that when resized it snaps to a grid.
This works fine until I start changing margins from zero to a number. The rect is inside a div #mysvg and if I change the margins of the div, the rect snaps…
ps0604
- 2,125
- 16
- 88
- 233
4
votes
1 answer
How to drag item out of horizontal scroll container?
I have a container that has overflow:auto so that it scroll's horizontally. I want to be able to drag an item out of that container to an above div. For this I have either been changing the container to overflow visible, or the items to have…
Chris
- 371
- 4
- 12
4
votes
2 answers
Interact JS, Drag svg elements inside viewboxed svg?
My problem, when I drag elements, the element is far behind the cursor, so it looks like it's a ratio issue potentially?
The code:
interact('.element', {
context: '.lipstick__plane'
})
.draggable({
snap: {
…
Marais Rossouw
- 807
- 9
- 25
4
votes
3 answers
How to get absolute coordinates of element with absolute position (JavaScript, Browser)
I have some problems with getting coordinates of an element's center which is child of other element with absolute position too.
Here you can see a screenshot with the order of elements.
To understand the problem better you can visit my repository…
Lev Balagurov
- 71
- 1
- 2
- 6
4
votes
1 answer
Interact.js on Angular2 with DefinitelyTyped
I installed interact.js angular2 in my project , but I do not know how to work with the methods described in the documentation.
My import is as follows
import * as _ from 'interact';
Is there a possibility of full service interact.js in Angular2 ?…
Emerceen
- 1,965
- 3
- 13
- 22
4
votes
1 answer
interact.js 1.2.4 drag and gesture action confusion
I have an issue with interact.js 1.2.4 and iPad Retina iOS 8.1 Mobile Safari, which I need to resolve somehow. The problem occurs in a sorting component nested inside a large sequential learning web-application, where the user solves a succession of…
Jonas Landt
- 61
- 2
3
votes
1 answer
Drag and drop with interact.js
I am trying to build an interface that allows both resize/drag and rotate on some element and to achieve this I am using interact.js javascript library.
I have my interact functions working:
interact('.resize-drag-ratio')
.draggable({
…
Johny D Good
- 387
- 1
- 7
- 22