Stack Overflow
Stack Overflow

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

117 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
  • 380
  • 2
  • 10
15
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
  • 13,889
  • 17
  • 74
  • 125
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
  • 13,889
  • 17
  • 74
  • 125
8
votes
2 answers

how to restrict drag elements in interact.js

I'm trying to stop my elements from overlapping using interact.js, but I don't have any idea how to get the n elements to be able to do it. Does anyone have an idea? Or some other way I can validate it. Try the solution to this question, but I don't…
Sebastian Ruiz
  • 194
  • 2
  • 15
8
votes
4 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
  • 111
  • 1
  • 2
  • 6
7
votes
2 answers

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
  • 597
  • 5
  • 19
7
votes
2 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
  • 8,306
  • 19
  • 64
  • 113
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 OL
  • 1,270
  • 1
  • 12
  • 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…
Nate
  • 7,606
  • 23
  • 72
  • 124
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
  • 17,787
  • 15
  • 78
  • 137
5
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
  • 2,735
  • 3
  • 17
  • 22
5
votes
2 answers

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
  • 633
  • 5
  • 17
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
  • 1,227
  • 23
  • 133
  • 330
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
  • 391
  • 4
  • 14
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
  • 937
  • 1
  • 10
  • 29
1
2 3 4 5 6 7 8