Skip to main content
121 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
1 vote
0 answers
70 views

I’m building a multi-touch application using HTML, CSS, jQuery, and Interact.js. The application has draggable squares that display content (HTML files loaded via iframes). Each square has its own ...
Sahid Molla's user avatar
  • 11
2 votes
1 answer
139 views

I'm writing an application where I use interact.js for DND(drag and drop). Often the start of a DND interaction causes a change in the page; dropzones changing position, being deleted, and new ones ...
t42's user avatar
  • 23
0 votes
1 answer
74 views

I'm trying to import interact.js with an importmap, but I get the error: Uncaught SyntaxError: Unexpected identifier 'interactjs'. My importmap: <script type="importmap"> { ...
CarlBateman's user avatar
  • 167
0 votes
1 answer
1k views

I am trying to refactor a dragListener into a .svelte.js module by defining the position of the dragged element as a reactive $state() variable inside +page.svelte and pass it back and forth between ...
The_Lab's user avatar
  • 117
0 votes
1 answer
240 views

I'm updating an old Ionic + Angular app, and am seeing a strange behaviour: elements made draggable with Interact.js will drag for a few hundred milliseconds, only to abort prematurely and fire the ...
ryanrain's user avatar
  • 4,847
0 votes
1 answer
236 views

I want to make a list of draggable objects like the one on the left side of this image: To do so I have modified Vue2InteractDraggable.vue to work with VueJs3 as you can see in this codesandbox, but ...
Bilal's user avatar
  • 4,135
0 votes
1 answer
547 views

I've setup interact.js draggable as - interact('.draggable') .draggable({ onstart: (event: Interact.InteractEvent) => onstartRef.current(event), onmove: (...
unknown_boundaries's user avatar
  • 1,610
0 votes
1 answer
202 views

This is my code, I've tried using setAttribute and don't understand why it doesn't work. I've also tried using .transform with the same result. setAttribute is located in the ondrop event function. ...
vlex's user avatar
  • 17
0 votes
1 answer
210 views

I would like develop a VueJS swip cards app but interactJS disable the y-axis native scroll on mobile. I reproduce my app on this codepen : https://codepen.io/ostaladaFab/pen/LYQBvXm/...
ostaladafab's user avatar
  • 11
0 votes
1 answer
30 views

<script> import '@interactjs/auto-start' import '@interactjs/actions/drag' import '@interactjs/actions/resize' import '@interactjs/modifiers' import '@interactjs/dev-tools' import interact from '...
Riley's user avatar
  • 3
2 votes
0 answers
748 views

My requirement is to have multiple divs with resizable and draggable property. I can resize any of them and can place at any position. I am able to resize them and can drag them but they get ...
Sebastian Ruiz's user avatar
  • 174
8 votes
2 answers
4k views

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 ...
Sebastian Ruiz's user avatar
  • 174
0 votes
1 answer
841 views

Use Case: What i am trying to do is to create a pdf editior, so there are fields such as textbox etc on the right side and a pdf on the left side. the user can drag and drop a field onto the pdf. (and ...
Abdullah Abid's user avatar
  • 1,661
1 vote
1 answer
2k views

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 ...
toddash's user avatar
  • 187
1 vote
0 answers
190 views

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 ...
Abhishek Tripathi's user avatar
  • 1,600
1 vote
0 answers
108 views

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, ...
user15630555's user avatar
  • 11
1 vote
1 answer
389 views

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? ...
bluelemonade's user avatar
  • 1,345
1 vote
2 answers
1k views

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 ...
Freddie Mercury's user avatar
  • 449
1 vote
1 answer
656 views

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 ...
bluelemonade's user avatar
  • 1,345
0 votes
1 answer
606 views

I'm using Ember, and I'm trying to setup a simple draggable div example using the interact.js library but I'm having some issues. I'm aware that the library DOES NOT modify the DOM and you need to do ...
David's user avatar
  • 15
0 votes
1 answer
413 views

This seems to be possible in the mobile version of interact.js while I am looking for a solution that works also in standard desktop browser.
underscore's user avatar
  • 67
2 votes
2 answers
928 views

I'm trying to start the drag of a draggable item after 1000ms of the touchstart event. I was able to fire the "dragstart" event: interact(element).fire({type: 'dragstart'}); but it just executes the ...
Killy's user avatar
  • 330
1 vote
1 answer
281 views

Good morning, I created a simple trello-style interface. Obviously I want to scroll the cards in a column: that works on a desktop pc with mouse wheel, but not on a smartphone using the touch scroll ...
Killy's user avatar
  • 330
2 votes
1 answer
452 views

I start with interract.js and try to figure out how to snap my elements to defined sizes in the index targets. It works well when I set the values statically but actually I would like to dynamize the ...
arno's user avatar
  • 823
0 votes
1 answer
1k views

In this jsFiddle I have an interact.js rect that can be resized with a snap of 10px by 10px. The rect is positioned in x = 95px, and when I move the left side to the left, it moves to x = 90x. This is ...
ps0604's user avatar
  • 1,215
1 vote
1 answer
1k views

In this jsFiddle I have an SVG rect that is resizable using interact.js. There's also a 10px by 10px grid and the .resizable function has included a 10px by 10 px snap. The objective is to resize the ...
ps0604's user avatar
  • 1,215
4 votes
1 answer
613 views

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 ...
ps0604's user avatar
  • 1,215
2 votes
1 answer
5k views

I am making a Tinder clone type app in Vue. I am using the Vue2InteractDraggable component. This component works great for the use case. But I want to have a click event on the draggable portion, ...
mkulak's user avatar
  • 65
1 vote
1 answer
396 views

In this jsFiddle I combine D3 with interact.js, both working on SVG. There's a group that contains a rect and an image. The group class is resizable and that works fine. The problem is that the rect, ...
ps0604's user avatar
  • 1,215
0 votes
1 answer
2k views

In this jsFiddle I have an SVG rect that is resized with interact.js. This works fine, however I need to add resize handles n/ne/e/se/s/sw/w/nw, 8x8 pixel squares at each point. These handles should ...
ps0604's user avatar
  • 1,215
1 vote
0 answers
322 views

I try to make a rectangle draggable. When I add a ViewBox to the svg the drag position is not correct anymore, without it works perfect. I think i need a scale factor. Have someone a solution? Here ...
live2's user avatar
  • 4,333
2 votes
0 answers
820 views

What I'm trying to do, is create an element from a none-draggable element. Then start dragging the new element from there. I've seen the examples, and managed to replicate the examples from Interact....
Mission Z3r0's user avatar
  • 51
3 votes
1 answer
6k views

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: ...
Johny D Good's user avatar
  • 427
2 votes
1 answer
3k views

I am trying to learn how to use the interact.js library and I cant get the resizing example to be draggable. I can resize the div ".resize-drag" but I don´t know how to get it draggable. Can anyone ...
Rawmouse's user avatar
  • 77
1 vote
1 answer
924 views

I'm building an interact.js app with two dropzones. One begins with all of the draggables in it and is scrollable. When dragging out of the origin dropzone, the draggables become hidden. I've tried ...
MrSpinn's user avatar
  • 103
2 votes
1 answer
3k views

I have created a fiddle of how my script looks: https://jsfiddle.net/xpvt214o/701253/ This is my code: HTML: <div id="_idContainer011" class="tabcontent" data-layer-id="35" data-locked="0" style=...
user avatar
1 vote
0 answers
531 views

I have this fiddle: https://jsfiddle.net/xpvt214o/700857/ This is my code: HTML: <div id="draggable-element"> test </div> <div class="handle"> handle </div> JS: ...
user avatar
1 vote
1 answer
2k views

I have item div elements with anchor elements as children. The size of the anchor children stretches the parent item element. I've made the item elements draggable with the library interact.js. The ...
iamrobin.'s user avatar
  • 1,624
-3 votes
1 answer
361 views

I just want to create a floor plan with drag,drop,rotate and delete elements and after that need to save the plan in HTML format. My requirement is that we have to create a floor plan, while going ...
gopinadh's user avatar
  • 11
14 votes
3 answers
4k views

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 ...
chemitaxis's user avatar
  • 15.1k
0 votes
1 answer
725 views

Is it possible to delete a Interact widget.I have exhausted of all the available resources online and still not exactly able to figure out whether we can delete Interact widget.As far as the ...
NewBie 's user avatar
  • 3,644
2 votes
1 answer
323 views

I am using Gridster along with Interact.I basically want to add images on the widgets with the help of Interact.For now I am just trying to place the interact widget on the gridster widget.But when I ...
NewBie 's user avatar
  • 3,644
7 votes
2 answers
6k views

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 ...
jimas13's user avatar
  • 660
6 votes
1 answer
588 views

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 ...
Nate's user avatar
  • 7,906
1 vote
2 answers
1k views

I am using interact in Angular 4. My draggable function works perfectly. In my resizable method the event cannot supply me any object property apart from currentTarget and target. In the example at ...
Ezequiel Lavaca's user avatar
  • 11
1 vote
1 answer
2k views

I'm building an application in which I'm hoping to use SVG and interact.js together for drag and drop of SVG elements. My SVG is using a ViewBox in order to scale the graphics correctly on different ...
matthew_b's user avatar
  • 779
2 votes
1 answer
976 views

I am making an Italian learning website, but I am having difficulties doing the dragging of flash cards out of their container, as it disappears. The website is viewable on github pages and the code ...
user avatar
2 votes
0 answers
653 views

I've recently came across a interact.js, a library that I want to use in one of my projects, but I cant get it to work. I've installed it via npm npm install interactjs --save It shows up in my ...
As above so below's user avatar
  • 859
3 votes
1 answer
3k views

I am attempting to use interact.js for it's draggable/droppable functionality in a web project. However, using the most simple example I can think of, I can't seem to get draggable to do anything. It ...
Beaut's user avatar
  • 124
2 votes
0 answers
1k views

I'm creating a form builder and I'm using interact.js to move elements and change their size. The problem is that when I drag them the design is not responsive anymore. This is the code of the ...
zguesmi's user avatar
  • 339

1
2 3